ACCESSIBILITY
Color contrast that holds up in real interfaces
Contrast ratio is an essential accessibility check, but the correct threshold depends on what the color is doing. Use HexCheck to evaluate the actual foreground and background, then review the full component in context.
What a contrast ratio measures
WCAG contrast compares the relative luminance of two visible colors. The result ranges from 1:1 for identical luminance to 21:1 for black against white.
The calculation is not a simple RGB average and should not be rounded up to pass a threshold. A computed ratio of 2.999:1 does not satisfy a 3:1 requirement.
WCAG 2.2 thresholds
| Content | Level AA | Level AAA |
|---|---|---|
| Normal text and images of text | 4.5:1 | 7:1 |
| Large-scale text and images of large-scale text | 3:1 | 4.5:1 |
| Required visual information for active UI components and meaningful graphics | 3:1 against adjacent colors | No separate enhanced threshold in SC 1.4.11 |
What counts as large text
WCAG defines large-scale text as at least 18 point when not bold, or at least 14 point when bold. In CSS terms, the exact rendered size depends on the relationship between points, pixels, zoom, and the platform.
Do not reduce a contrast target merely because a heading “looks big.” Confirm the actual computed size and weight. For mixed styles, evaluate the portion that carries the information.
Controls, focus indicators, icons, and charts
WCAG 2.2 requires a 3:1 contrast ratio for visual information needed to identify active user interface components, states, and meaningful graphical objects.
- Input boundaries may need contrast when the boundary is necessary to identify the field.
- Selected states, check marks, and disclosure arrows must remain perceivable.
- Meaningful icons and chart segments need sufficient contrast against adjacent colors.
- Focus indicators need to be visible; WCAG 2.2 also adds requirements concerning focus not being obscured.
Inactive controls and purely decorative graphics have specific exceptions, but avoid making disabled states so faint that users cannot understand the interface.
Use Contrast Lab
Type a hex value, use either native color picker, or add the active header color to the existing comparison.
The ratio and status explain whether the pair passes normal text, large text, and UI requirements.
The quick choices show which neutral text direction works better on the selected background.
Review headline, body copy, small supporting text, links, and a button rather than relying on isolated swatches.
Switch between AA 4.5:1 and AAA 7:1 before applying a suggested foreground or background adjustment.
The Swap action reverses the roles while keeping the same ratio. The Open Foreground Color and Open Background Color actions always follow the values currently visible after a swap.
Understand the accessible corrections
Contrast Lab attempts to preserve hue and saturation while adjusting lightness by the smallest amount needed to reach the selected target. It offers separate suggestions for changing the foreground or changing the background.
- If the pair already passes, the current color remains the suggestion.
- If one-sided adjustment can reach the target, the result shows the corrected hex and ratio.
- If the chosen target cannot reasonably be met by adjusting only one side, treat the suggestion as a starting point and reconsider both colors.
Test complete component states
A component can pass in one state and fail in another. Test:
- Default, hover, active, selected, disabled, loading, and error states
- Keyboard focus indicators against every adjacent color
- Links before and after visiting, including underline or other non-color cues
- Text over images, video, gradients, overlays, and translucent surfaces
- Icons, borders, dividers, form validation, and chart labels
- Mobile and desktop layouts, zoom, high brightness, glare, and dim environments
A passing ratio is not the whole experience
Do not communicate with color alone
WCAG 2.2 Level A requires that color is not the only visual means of conveying information, indicating an action, prompting a response, or distinguishing an element. Add text, icons, patterns, shape, position, or another meaningful cue.
Typography still matters
Small type, low weight, tight spacing, motion, glare, and complex backgrounds can reduce readability even when the authored colors pass.
Contrast tools do not certify a product
HexCheck evaluates color relationships. Accessibility conformance also includes semantics, keyboard access, focus order, labels, reflow, text spacing, motion, alternatives, and many other requirements.
Contrast review checklist
- Use 4.5:1 for normal text unless a documented exception applies.
- Confirm size and weight before using the large-text threshold.
- Check required controls and graphics at 3:1 against adjacent colors.
- Do not round a failing ratio up.
- Composite transparency over the real background before testing.
- Test every state and every background the component can appear on.
- Provide cues beyond color when color carries meaning.
- Aim above the minimum when typography or conditions are demanding.