#0A8CFF#4CC53F#FFB11A#FF3B4E| Text category | AA | AAA |
|---|---|---|
| Ordinary text | 4.5:1 | 7:1 |
| Qualifying large text | 3:1 | 4.5:1 |
| #777777 against white | ~4.48:1: fails ordinary AA | Fails ordinary AAA |
Contrast is a property of a pair
A color is not accessible or inaccessible on its own. Contrast compares a foreground with the background immediately behind it. A dark blue can be readable on white and unreadable on black. Likewise, a pale yellow can work as a surface with dark text while failing as a label on white. Begin with the actual pair used in the interface, including the effective background after transparency or overlays.
The guidance here follows WCAG contrast requirements for text and important non-text elements. It is not a full accessibility certification: keyboard access, names, structure, error handling and assistive-technology behavior also matter. The Contrast Checker measures the numeric pair, while you remain responsible for checking how that pair is used in the final page.
AA and AAA thresholds
WCAG AA requires at least 4.5:1 for ordinary text and 3:1 for qualifying large text. AAA raises those targets to 7:1 and 4.5:1 respectively. Large text means at least 18 point, or 14 point when bold; with the usual CSS reference conversion, these correspond to 24 CSS pixels and approximately 18.67 CSS pixels bold. A heading does not qualify merely because it uses a heading element.
Do not round a failing result upward. A computed 4.49:1 does not meet a 4.5:1 threshold even if a display formatted to one decimal place shows 4.5. Leave some margin when choosing colors, especially if the design uses small or thin text. Passing the minimum is a useful baseline, not a promise that every reader will find the text equally comfortable.
Worked examples with black and white
Black #000000 against white #FFFFFF gives the maximum sRGB contrast ratio of 21:1. Mid-gray #777777 against white is approximately 4.48:1, so it misses AA for ordinary text. The same gray against black is approximately 4.69:1 and passes AA. This example shows why judging a shade by eye or relying on a rounded display can lead to the wrong decision.
Another familiar example is #767676 on white, which reaches approximately 4.54:1. It just clears the ordinary-text AA threshold, but choosing a darker shade can create a more comfortable margin. For a bright pastel surface, start by testing black or a very dark neutral. A white label on a light surface commonly fails even when the surface itself looks visually distinctive.
What the calculation does
The WCAG method converts sRGB channels to linear values and combines them into relative luminance. The lighter luminance plus 0.05 is divided by the darker luminance plus 0.05. The result runs from 1:1 for identical luminance to 21:1 for black and white. This is different from comparing the HSL lightness numbers of two colors.
HSL is convenient for editing a palette, but equal changes in HSL lightness do not guarantee equal contrast changes across hues. A vivid yellow and a vivid blue can have very different luminance despite similar HSL settings. Use the calculation after editing rather than assuming that a fixed lightness gap always passes. Keep the exact HEX values in your test record so the result can be reproduced.
Repair a failing button
Suppose an illustrative primary button uses a bright blue surface and white ordinary-size text. Measure that pair first. If it fails, one option is to darken the button surface while retaining the original blue in decorative brand accents. Another is to use a dark label if that passes and fits the visual hierarchy. Do not add a barely visible shadow and treat it as a replacement for a passing foreground/background pair.
Check hover, pressed and focus states after the change. A passing default state can become failing if the hover background gets lighter or the label opacity drops. Keep disabled controls distinguishable, and remember that an inaccessible-looking disabled state can still confuse users even where a specific contrast exemption applies. When a state communicates a message, pair its color with clear text.
Non-text contrast and focus
Important control boundaries, state indicators and graphical objects generally need 3:1 against adjacent colors under the relevant non-text contrast criterion. Examples include a required input boundary, a selected checkbox mark or a meaningful chart line. Not every decorative border is required to pass, but do not classify the only visible indication of a control as decoration simply to avoid testing it.
A keyboard focus indicator must be visible and must not be hidden by sticky content. Use an outline with enough separation from the element, then inspect it against the surrounding surface in both themes. Test real keyboard navigation through links, fields, menus and dialogs. A page can have excellent text contrast and still be unusable if the visitor cannot see where focus has moved.
Review the entire composition
Images, gradients and translucent layers require extra care because the background can vary under the same line of text. Test the lowest-contrast area rather than selecting the most favorable pixel. If the background is unpredictable, add a stable solid surface behind the text. Similarly, ensure a text label remains readable when a user supplies a different palette or switches to a light theme.
Build a checklist containing body text, supporting text, navigation, buttons, inputs, error messages, chart labels and focus outlines. Run the tests at the actual font sizes and weights. Review smaller screens for clipping and crowded controls, because numeric contrast cannot compensate for text that is cut off. Save the checked pairs alongside the design tokens so later palette changes trigger a meaningful retest.
References and frequently asked questions
The authoritative requirements are in the W3C explanation of Contrast Minimum, Contrast Enhanced and Non-text Contrast. Consult them when deciding whether an exception applies; do not generalize a logo exemption to ordinary website text.
Does AA mean the whole site is accessible? No. Passing contrast addresses specific criteria, not the complete standard. Structure, keyboard behavior and understandable controls require their own checks.
Should I target AAA for everything? Higher text contrast can be useful, but decide in context and preserve a clear hierarchy. At minimum, meet the applicable AA thresholds for the actual use.
Can I rely on color alone for errors? No. Include a written explanation and a clear association with the relevant field so the message does not depend on recognizing a hue.
