Hue can categorize, while luminance contrast helps distinguish foreground from background. Neither makes the other unnecessary.
By the end: calculate a text contrast ratio and avoid treating it as a complete accessibility or aesthetic score.
Use color for a stated role
Hue names a color family such as blue or orange. Saturation describes colorfulness in a particular color model. Luminance concerns light-related intensity, but a computed relative luminance is not a full model of perceived brightness in every context. Equal numerical lightness settings in a simple color picker need not produce equal contrast. A six-digit hexadecimal color writes red, green, and blue as three pairs of base-sixteen digits. Digits run from 0 through 9 and then A through F. In #777777, each pair 77 means 7 × 16 + 7 = 119 on the 0–255 channel scale.
A categorical palette distinguishes kinds without implying order. A sequential palette represents progression; a diverging palette emphasizes departures on either side of a meaningful center. Do not use a rainbow simply because many colors are available. Color names, symbols, or direct labels must carry distinctions when hue cannot.
Decide what a color difference means
Suppose a materials list contains glass, copper, and wood. There is no arithmetic reason to put copper halfway between glass and wood. Assigning each material a different hue can mark separate categories, but a light-to-dark sequence would suggest an order the list does not contain. Now suppose the labels are 0, 50, and 100 available places. Those numbers do have an order. A sequential treatment can reinforce that order, while the printed values supply the exact amounts that a swatch cannot communicate alone.
The first specimen gives the same materials two treatments. Read only the names and ask whether either arrangement supplies a numerical ranking. Neither does. The sequential-looking treatment adds an implication without adding evidence. Then read the counts in the second specimen. Its ordering is justified by the numbers, but equally spaced counts do not prove equally spaced perceived color differences. These are assigned visual roles, not a calibrated scale of human sensation. A larger difference between two swatches need not mean a larger numerical difference.
Category names do not establish a ranking
Different category hues
Glass
Copper
Wood
Unjustified progression
Glass
Copper
Wood
Counts have an order
0 available places
50 available places
100 available places
Both material lists contain the same facts. The right list adds a dark-to-light progression without a quantitative basis. The count list below has a numerical order, but its swatches are not perceptually calibrated.
A diverging treatment answers a different question. Suppose a room should hold 20 people, and actual attendance is 15, 20, or 25. Subtract the target from each attendance count to obtain departures of minus five, zero, and plus five. The target gives the middle a reason to exist. Two color families can distinguish below from above, while labels retain direction and magnitude. Without that meaningful reference, coloring the middle item neutrally can imply that it is normal or desirable when neither claim follows from the data.
Do the subtraction before choosing the colors in the attendance specimen. Fifteen minus twenty is minus five, so it belongs on the below-target side. Twenty-five minus twenty is plus five, so it belongs on the above-target side. Ask whether being above target is good, bad, or simply different. The arithmetic cannot decide. A classroom capacity limit and a fundraising target would give the same signed departures different practical meanings. Calling every positive departure successful would import an assumption about the task into the palette.
Color assignments also have to remain consistent across repeated items. If copper is gold in one list and green in another, a reader must learn the assignment again or risk matching the wrong material. This does not mean copper inherently owns one particular hue. The relationship comes from the local key and labels. A useful reversal test is to imagine swapping the category colors while retaining every word. Category identity should remain recoverable. Swapping the words instead would change the facts, so that would no longer be a treatment-only comparison.
Separate these information roles from foreground visibility. A label saying Copper may correctly identify its category while having insufficient contrast against its background. Conversely, three labels may all contrast strongly with their backgrounds while their hue assignments suggest a false order. Inspect the words and their background as one problem, then inspect relationships among categories as another. Fixing either problem does not automatically fix the other. An orderly palette can obscure small labels or encode relationships the content never supplied.
Subtract the target before assigning sides
Attendance
Subtract target
Departure
15 people
15 − 20
−5 people
20 people
20 − 20
0 people
25 people
25 − 20
+5 people
Three attendance cases share a target of 20. Values below, at, and above that target produce departures −5, 0, and +5. The swatches label sides, not an independently calibrated perception scale or a judgment of success.
Compute the WCAG sRGB ratio
sRGB channel values are not linearly proportional to light. Linearization converts them to the values needed for the luminance weights. For opaque sRGB colors, first normalize each 8-bit channel to zero through one, then linearize it. The low segment divides by 12.92; the other uses the 2.4 power after an offset and rescaling. Relative luminance combines the linear channels with weights 0.2126, 0.7152, and 0.0722. The ratio divides the lighter luminance plus 0.05 by the darker plus 0.05.
The lab uses opaque grayscale text on white, so all three channels match and their weighted sum is that one linear value. It shows a fixed darker reference alongside a selected tone. A larger ratio indicates more contrast under this definition. The computed result is not a measurement of your monitor or a prediction of reading speed.
Follow one gray through the calculation
Begin with a single channel rather than a full palette. In an opaque gray, red, green, and blue have the same channel value. Dividing each by 255 puts it on a scale whose endpoints are zero and one. That step changes the unit, but it does not yet make the number proportional to light. For example, channel 128 becomes about 0.502 after division. Applying the sRGB conversion gives about 0.216, not one half. Skipping this conversion would calculate a different quantity from WCAG relative luminance.
The normalized channel selects a branch. Values at most 0.04045 use division by 12.92. For integer channels, 10 divided by 255 is about 0.03922 and takes that branch, while 11 divided by 255 is about 0.04314 and takes the power branch. The normalized channel decides the branch, not luminance or contrast. The small-value branch also differs from the power curve. Follow the displayed equations with these quantities kept separate.
For channel 119, normalization gives approximately 0.466667, above the branch boundary. Add 0.055, divide by 1.055, and raise the result to the power 2.4. The resulting linear channel is approximately 0.184475. Because this is gray, all three linear channels match. Their weights add to one, so the weighted luminance is also approximately 0.184475. A colored foreground generally needs three separate conversions before weighting. Averaging its original red, green, and blue channel numbers would not reproduce this calculation or its intended luminance definition.
White has luminance one. Add 0.05 to it to obtain the numerator 1.05. Add 0.05 to the gray luminance to obtain a denominator of approximately 0.234475. Dividing gives about 4.478089. The intermediate picture separates these steps because 119, 0.466667, 0.184475, and 4.478089 describe different quantities. None is a percentage of people who can read the text. The ratio compares two specified colors under the formula. It does not measure room lighting, display calibration, thin-stroke rendering, or a person's reading performance.
Channel 119 becomes a ratio only after conversion
Quantity
Operation
Approximate result
Encoded gray
Hexadecimal 77
119 per channel
Normalized channel
119 ÷ 255
0.466667
Linear channel
Offset, rescale, power 2.4
0.184475
Gray luminance
Equal channels; weights sum to 1
0.184475
Ratio against white
1.05 ÷ 0.234475, approximately
4.478089:1
This exact-comparison table distinguishes an encoded channel, a normalized channel, a linear luminance, and a pairwise ratio. Displayed intermediate values are rounded; the ordinary-text threshold decision uses the unrounded ratio.
The added 0.05 also explains the endpoints. Identical foreground and background luminances give identical numerator and denominator, hence a ratio of one. Black against white gives 1.05 divided by 0.05, hence twenty-one. Black does not cause division by zero because of that added constant. Reversing which color is foreground does not change the ratio, since the formula always puts the lighter luminance above the darker. The visual experience may change, but this symmetric numerical result cannot represent that difference.
Check your understanding with channel 118 before consulting the lab result. A smaller gray channel produces a smaller linear value here, making the denominator against white smaller. The numerator stays 1.05, so the ratio increases. The computed value is about 4.542225, just above 4.5. This direction follows from the arithmetic, not from an assumption that every darker-looking color is better for every role. On a dark background the lighter color may need to change instead. Always identify both members of the actual pair being compared.
Reversing the pair keeps the numerical ratio
Gray text on white
West entrance Booking required
White text on gray
West entrance Booking required
These are real HTML specimens with reversed opaque sRGB colors. #666666 and #ffffff have the same ratio in either direction, approximately 5.741836:1. The symmetric formula does not claim identical reading experience.
Inspect the relationship
Normalize an 8-bit channel
Each channel ranges from 0 to 255. For #777777, each channel is 119, so c is approximately 0.466667.
Linearize the low segment
Use this branch only when c is at most 0.04045.
Linearize the remaining segment
For #777777 this gives approximately 0.184475 per linear channel. White has luminance one, giving a contrast ratio of approximately 4.478089, below 4.5.
Compute relative luminance after channel linearization
R, G, and B here are linearized channels, not the original 0–255 channel values. For grayscale they are equal.
Compare two opaque sRGB colors
Use the unrounded result for threshold checks. This ratio is dimensionless and ranges from one to twenty-one.
Match a palette to the kind of information
Categories: no quantitative order
Glass
Copper
Wood
Sequential: increasing count
0 items
50 items
100 items
Diverging: signed departure from zero
−10 units
0 units
+10 units
These discrete original examples illustrate roles, not calibrated perceptual spacing. Each swatch has a text label; color is not the only way to recover its value. The diverging example has a meaningful zero, unlike an unordered category list.
Inspect the threshold without rounding into a pass
Fixed reference
West entrance Booking required
#666666 on #ffffff 5.742:1
Selected gray
West entrance Booking required
#777777 on #ffffff 4.478:1
Selected #777777: 4.478:1. General ordinary-text AA threshold: below 4.5:1. Large-text threshold: meets 3:1. This is not a full accessibility verdict.
The white panels intentionally contain example text at different contrast levels. Essential explanations and results remain outside them in the normal theme. Controls change the selected gray channel equally in R, G, and B; backgrounds remain opaque white. Threshold results use unrounded ratios, not the three-decimal display. These samples are ordinary 18 px regular text; the large-text result applies only if qualifying sizes are used.
Use the threshold controls as a bounded experiment
Use the existing contrast lab to investigate a boundary, rather than trying to make the two panels look equally attractive. Start with the preset for #777777. Both its text lines are ordinary 18 CSS px regular text. Predict its ordinary-text result using the preceding denominator calculation, then compare the visible result message with the prediction. The fixed reference remains #666666 on white. Selecting a new gray changes the selected panel's foreground, not its wording, weight, background, or font size. This comparison supplies no reading-speed measurement.
Next select #767676 and compare its result with #777777. Their channel values differ by one on the 0 to 255 scale, yet they lie on opposite sides of the ordinary-text minimum. A boundary can separate nearly adjacent settings without making the visual difference dramatic. Do not decide the threshold by squinting at the specimens. Compare the computed, unrounded number with 4.5. Do not infer a sudden change in everyone's reading ability. A criterion threshold and an individual response are different kinds of statement.
Move the selected gray channel slider to 160, or choose the faint-example preset. With white fixed, increasing the channel lightens the text, raises the darker luminance, and lowers the ratio. Predict that direction before reading the result. Then return to the darker-reference preset at 102. The selected and fixed panels now use the same color pair, so their ratio should agree. Surrounding labels or position may affect apparent prominence without changing the equality of the color calculation.
The threshold specimen below separates a computed value from a displayed value. A ratio of 4.499 becomes 4.50 when rounded to two decimal places, but it remains smaller than 4.5. Rounding changes the report, not the underlying comparison. Similarly, a two-decimal display of 3.00 could conceal a value just below three. Read the threshold status with its precision policy. Leaving margin reduces boundary dependence, but does not replace the official threshold.
A rounded display is not the comparison value
Computed ratio
Two decimals
Minimum
Comparison
4.499:1
4.50:1
4.5:1
Below
4.500:1
4.50:1
4.5:1
Meets
2.999:1
3.00:1
3:1
Below
These constructed ratios isolate rounding. The first and third rows remain below their respective minima even though their two-decimal displays match the threshold. They are arithmetic examples, not additional selectable color pairs.
The lab also reports a large-text threshold, which is conditional rather than a second verdict on its ordinary-size specimen. At the usual CSS conversion, 18 pt equals 24 CSS px, while 14 pt equals about 18.67 CSS px. The latter route also requires bold text. Eighteen CSS px regular text meets neither size condition. Enlarging a sample on a physical high-density screen does not turn a CSS size setting into the same number of points. Keep the authored size, its unit, and the qualifying weight distinct when selecting the applicable rule.
Finally, compare the ordinary and large-text conditions in the size specimen. The words and gray stay fixed while size or weight changes explicitly. The pair ratio therefore stays about 4.478089, although the applicable general minimum can change. This is why a ratio alone cannot identify a passing text treatment without context. The comparison is about WCAG 2.2 criterion 1.4.3, Contrast Minimum, under its scope and exceptions. It is not an assessment of all accessibility requirements, and it does not establish that either specimen is comfortable for every reader.
Same gray pair, different qualifying text size
18 CSS px regular
West entrance Booking required
24 CSS px regular
West entrance Booking required
19 CSS px bold, above the approximately 18.67 CSS px bold size boundary
West entrance Booking required
All three specimens use #777777 on opaque white, approximately 4.478089:1. The 18 CSS px regular specimen is below the general ordinary-text minimum. The 24 CSS px regular and 19 CSS px bold specimens meet the large-text size conditions and its general 3:1 minimum. The weight change is explicit.
Apply thresholds without rounding them into passes
WCAG 2.2 AA generally requires at least 4.5:1 for ordinary text and 3:1 for large text, subject to its exceptions. Large text is at least 18 pt, or 14 pt bold, roughly 24 CSS px or 18.67 CSS px bold at the usual conversion. A ratio just below 4.5 does not pass merely because a display rounds it to 4.50.
Required component and graphical cues have a separate 3:1 criterion against adjacent colors, with exceptions. Color-only meaning is a separate problem again. Transparent layers, images behind text, disabled controls, logos, and non-sRGB spaces need additional care. This calculator handles only two opaque sRGB colors, not a page audit.
Choose the pair and the criterion deliberately
A notice can contain several foreground-background pairs. The main paragraph may sit on a plain page, a category label on a colored chip, and a caption on a photograph. A favorable paragraph result does not transfer to the chip or the photograph. Identify each text region's actual background. The opaque chip specimen makes those pairs explicit. Adding a translucent overlay or a photograph would require resolving the resulting background, potentially at several locations, before applying the two-color calculation taught here.
Inspect the materials chips without relying on their fills. Every chip names its material, so removing hue would preserve category identity. Now imagine deleting the words while retaining three colored rectangles. Even excellent contrast between each rectangle and the page would not tell an unfamiliar reader which material each one represents. That failure concerns Use of Color, criterion 1.4.1, rather than insufficient ordinary-text contrast. A key could restore the mapping, but direct labels avoid repeated lookups.
Words preserve the material assignment
GlassCopperWood
Every opaque chip names its material. The dark #111111 text contrasts with each fill, but that pairwise fact is separate from the words supplying category identity. No color-only key is needed to identify Copper.
A required graphic or control cue raises another pair-selection question. A small status shape may need to be distinguished from the surface immediately around it, rather than from some distant white panel. WCAG 2.2 criterion 1.4.11, Non-text Contrast, generally requires three to one for visual information needed to identify controls and states, and for graphical parts needed to understand content. It has exceptions, including inactive controls and certain essential presentations. It is not a rule that every decorative border must contrast with every other color anywhere on a page.
Use the adjacent-pair drawing to reason through a boundary. The accent rectangle touches a dark surrounding surface. Its relevant outer boundary is that contact, not a comparison with the gold patch elsewhere in the drawing. A required internal mark may need comparison with the accent fill. Merely calculating the outer boundary would leave that inner mark unexamined. The schematic supplies no contrast verdict. It identifies the relationships a meaningful numerical check would address.
Identify the surfaces that actually touch
Schematic, not a numerical contrast scale. The accent region's outer edge touches the surrounding surface. The dark inner mark touches the accent fill. The detached gold patch is not the accent region's adjacent background. Each required cue needs its own relevant comparison.
Text contrast exceptions also need a content judgment. A logo has a stated exception under 1.4.3, and genuinely decorative words can fall outside its text contrast requirement. An essential location does not become decoration because a designer places it in a faint footer. Likewise, inactive-control exceptions are not a reason to make instructions explaining inactivity unreadable. Ask what information the reader needs, and apply the criterion to that role. Otherwise a technically correct exception can be attached to the wrong content and conceal the original communication failure.
Finish the chip exploration by choosing a specific task such as finding Copper, rather than declaring the palette accessible. You can establish that the visible word supplies identity and calculate its specified foreground-background ratio. You have not thereby checked focus behavior, reading order, clipping after enlargement, or whether the name matches the underlying item. Those are different mechanisms. Preserve the narrow result as evidence, then investigate the next unresolved mechanism. The useful conclusion names the tested pair and criterion instead of turning a successful local comparison into certification of a whole interface.
Exercises
Calculate from luminances
A text/background pair has relative luminances 0.15 and 0.85. Find the ratio and assess ordinary text under the general AA threshold.
Hint
Add 0.05 to both, then divide lighter by darker.
Worked answer
Step
Value
Lighter plus 0.05
0.90
Darker plus 0.05
0.20
Ratio
4.5:1
A pairwise threshold result is narrowly scoped.
The ratio is 0.90/0.20 = 4.5:1. It meets the general ordinary-text minimum exactly under the stated opaque-color assumptions. That says nothing about correct labels, keyboard access, reading order, text clipping, or whether every other pair on the page meets its criterion.
Reject a rounded pass
A tool computes 4.499:1 but displays 4.50:1. Can ordinary text be marked as meeting the 4.5 minimum?
Hint
The threshold applies to the unrounded value.
Worked answer
Value
Ordinary-text result
Computed 4.499
Below 4.5
Displayed 4.50
Rounding does not change result
Improved pair above 4.5
Recheck actual colors
Labels and calculation precision must not disagree.
No. 4.499 is less than 4.5. Increase contrast and use the unrounded value for the comparison. It can be sensible to leave practical margin rather than design exactly at a boundary, but do not invent a different official threshold.
Sources and further reading
These optional references support the stated mechanisms and technical criteria. Selected relevant passages were reviewed. The notices, diagrams, and numerical examples are original teaching comparisons, not empirical usability results. Design hypotheses need tests with intended readers; technical checks do not establish aesthetic quality or whole-site conformance.
WCAG 2.2 explanatory guidance, including sRGB luminance, unrounded thresholds, and large-text exceptions. A pairwise ratio is not whole-page conformance. Use the CSS conversion 1 pt = 4/3 px; the cached explanation’s approximate 18.5 px must not lower the 14 pt bold threshold.
Selected distinctions among sequential, diverging, cyclic, and qualitative color maps. Our three discrete palettes are original examples, not imported maps or a perceptual-uniformity certification.