A contrast calculation traces supplied text and background colours into a numerical decision. Use two fictional pairs to save channel calculations, luminance, unrounded ratios and open questions without changing a website.
What does this contrast calculation decide?
A contrast calculation compares supplied text and background colours numerically. Your deliverable is a saved calculation note for a designer or site owner, not a changed website. AI means artificial intelligence; neither a model response nor a browser session is required for this manual exercise. The data are deliberately fictional.
We stipulate ordinary text and a 4.5:1 threshold. The example is not a logo, decoration or large-text exception. These conditions are supplied rather than discovered by inspecting a page. Do not take the result as permission to apply the same threshold to every icon, chart or brand mark on a site.
Both colours are opaque eight-bit sRGB inputs. Opaque means the underlying colour does not show through. Each red, green and blue channel is an integer from zero to 255. The colour space matters: values guessed from a screenshot, an unspecified colour profile or a transparent layer are not interchangeable with these declared inputs.
The alt text review asks what an image does on a page and what alternative it needs. Here you preserve two colour pairs and the arithmetic behind a narrow threshold decision. You are not judging wording, font comfort, keyboard operation or the accessibility of an entire page. A passing number cannot establish all of those outcomes.
How should the original colour pairs be preserved?
Create a fictional V1 source card. B1 has text RGB(117,117,117). B2 has text RGB(120,120,120). Both have background RGB(255,255,255). Each ID refers to one complete text-background pair. Keep the background beside its text values rather than collecting colours in an unlabeled list.
The equal channels make these examples grey. Equality is a convenience, not a general formula for colour. A coloured input can have three different channel values, and its luminance is not the simple arithmetic average of those numbers. Preserve the channel names even when their values happen to match.
Keep supplied values separate from derived columns. The words PASS and FAIL will refer only to the stipulated 4.5 threshold. A FAIL does not mean this note has inspected the actual site; it means the supplied pair falls short under the exercise conditions. A PASS is equally narrow and does not approve a design for publication.
A small-business brand plan includes decisions about identity and consistent materials. This note adds a reproducible numerical check, not a new palette or a branding recommendation. If the actual foreground or background is unavailable, ask the owner for declared values. Do not replace an unknown background with the convenient white used here.
How do the channel calculations produce luminance?
On Windows, open Start, search for Calculator and launch the application. Open its menu and select Scientific mode, which includes a power function. First divide each eight-bit channel by 255. For B1 the normalized channel is 117/255, displayed as approximately 0.458823529411765. Retain the fraction or full calculator expression; do not type a shortened display value into every subsequent stage.
Apply the piecewise rule separately to each normalized channel s. If s is at most 0.04045, the linear value is s/12.92. Otherwise it is ((s+0.055)/1.055)^2.4. The exponent means raising the bracketed value to the power 2.4, not multiplying it by 2.4. Use the calculator’s power or xʸ function and keep the parentheses.
For B1 enter ((117/255+0.055)/1.055)^2.4. Each linear channel is approximately 0.177888415983629. For B2, replacing 117 with 120 gives approximately 0.187820772300678. All example channels, including white, use the second branch. The first branch remains part of the rule; do not silently remove it from your saved formula.
Compute L = 0.2126×R + 0.7152×G + 0.0722×B. For B1 the three weighted terms are approximately 0.037819077238120, 0.127225795111492 and 0.012843543634018. For B2 they are approximately 0.039930696191124, 0.134329416349445 and 0.013560659760109. Add the three terms before using luminance in the ratio.
For white, each normalized channel and each linear channel is one. Its weighted terms are 0.2126, 0.7152 and 0.0722, giving L=1. Because the weights sum to one, a grey input’s luminance equals its shared linear channel here. That shortcut does not justify averaging arbitrary RGB channels. Displayed decimals in the table are rounded for reading; the original expressions remain the calculation inputs.
| ID | RGB | sRGB / 255 | R = G = B | L | Ratio | 4.5:1 |
|---|---|---|---|---|---|---|
| B1 | [117, 117, 117] | 0.458823529411765 | 0.177888415983629 | 0.177888415983629 | 4.607518093747377 | PASS |
| B2 | [120, 120, 120] | 0.470588235294118 | 0.187820772300678 | 0.187820772300678 | 4.415089522426074 | FAIL |
Why must the threshold comparison use the unrounded result?
Calculate (lighter luminance+0.05)/(darker luminance+0.05). White is the lighter colour in both examples. B1 gives 1.05/(0.177888415983629…+0.05), approximately 4.607518093747377. B2 gives approximately 4.415089522426074. Compare the full calculator results with 4.5 before shortening the displayed numbers.
B1 passes the stipulated threshold; B2 fails. The direction is not a preference for one grey in every design. It is the outcome for two supplied text colours against this particular supplied white background. Reversing which colour is text does not change the mathematical ratio, but it does not settle all questions about the resulting interface.
Evaluate three claims in the note. “B1 reaches 4.5” is supported by its ratio. “B2 is close enough, so round it into a pass” is rejected. “A passing B1 proves the whole website is accessible” is unsupported by this exercise. Give each claim its decision, the relevant source pair and the numerical or scope evidence.
The rounded percentage audit concerns displayed category totals. Here the output is a decision for each colour pair, not a corrected total. Counting how many rows pass cannot replace checking which row passed or why. The W3C explanation explicitly says not to round a calculated ratio before comparing it with the criterion threshold.
When should the result remain unresolved?
An unknown background leaves the second colour missing. A photograph, gradient or transparent layer cannot simply be replaced with white to complete a convenient calculation. Mark the application decision HOLD and ask which background the text actually appears over. This exercise does not teach compositing transparent colours or selecting the worst point of a gradient.
Unknown text classification also matters. You can retain a computed ratio for known colours while leaving its criterion decision unresolved if the stipulated ordinary-text condition is not established. W3C distinguishes large text and other exceptions. This is not a complete decision tree for every possible content type.
The image crop boundary card similarly keeps supplied geometry separate from unknown information. Here the unknown is colour or applicability rather than a rectangle. A tidy ledger does not fill the gap. Do not claim a browser rendering, anti-aliasing effect or reader experience has been tested by this arithmetic.
The two cited documents come from W3C, the same institution. The Understanding page is informative explanation; the WCAG 2.2 Recommendation supplies the criterion and definitions. They are not two independent organisations endorsing a design. A real accessibility review still needs the actual page context and appropriate implementation checks. No legal conclusion is offered by this fictional worksheet.
How can the calculation note be saved and checked again?
On Windows, open Start, search for Notepad and open the application. Create a new blank document. Record V1, the unchanged B1 and B2 RGB pairs, the white background, normalized and linear channel expressions, three weighted terms, luminance, ratio and decision. Label shortened display values separately from retained calculation expressions.
Add the three claim decisions and their evidence. Include an unresolved-background example with its question for the owner. Press Ctrl+S, choose Documents, name the file contrast-note-V1.txt and select Save. Close the editor. Open Documents in File Explorer and double-click contrast-note-V1.txt to reopen the named file.
Check that B1 still contains 117 and B2 contains 120 in all three channels. Re-enter one complete expression in the scientific calculator and compare its result with the saved ratio. Confirm the FAIL was not replaced by an optimistic rounded PASS. This is local readback of an artifact, not an observed user test or a live website change.
A suggested fifteen-minute cognitive budget allows three minutes for scope and inputs, six for calculator work, three for claim decisions and three for saving and reopening. It is a planning allowance, not measured participant performance. In earlier public writing I discussed how attention to perfection can delay useful work; the application here is finishing one reproducible note rather than claiming a complete site redesign. See the artificial intelligence guide for broader context, while keeping this manual calculation independent of any model output.
Frequently asked questions
Does B1 passing certify the website?
No. Only the supplied colour pair and stipulated ordinary-text threshold were checked. Page context and other accessibility requirements remain separate.
Can I round B2 up to the required threshold?
No. Compare the unrounded result with 4.5. B2 is approximately 4.415089522426074 and fails the stipulated criterion.
Why keep three weighted terms for grey?
The equal channels simplify these examples, but the general formula still weights red, green and blue separately. Do not replace it with an arbitrary RGB average.
What if the background or opacity is unknown?
Keep the application decision unresolved and request the missing information. Do not assume the fictional white background applies to the real material.
