Low-contrast text often looks elegant in a design mock-up and becomes exhausting on a real screen. Sunlight, a dim display, small type or reduced vision can turn a fashionable pale grey into invisible copy. Contrast is therefore a usability decision, not merely a compliance score.
What colour contrast measures
A contrast ratio compares the relative luminance of a foreground colour and its background. The ratio ranges from 1:1 for identical colours to 21:1 for black and white. The visual result depends on the exact pair, not on whether a colour sounds dark or light.
The free WCAG colour contrast checker tests any text and background pair against AA and AAA thresholds and provides a live preview.
AA and AAA in plain language
WCAG defines different thresholds based on text size and the intended conformance level. Normal text needs stronger contrast than large text because fine strokes are harder to distinguish. AA is the common practical target; AAA is more demanding and may be appropriate where maximum readability is important.
Do not enlarge body text simply to qualify for a lower contrast threshold. Typography, line length, weight and spacing still need to support comfortable reading.
Where contrast problems hide
- Placeholder text inside forms
- Light grey footer links
- Text placed directly over photographs
- Disabled-looking secondary buttons that are still interactive
- Thin coloured type on white
- Hover and focus states
- Charts that rely only on similar colours
A homepage may pass in its main content and fail in the cookie banner, navigation, form errors or mobile menu. Test components and states, not only the brand palette.
How to repair a weak colour pair
Usually, change the text colour first while preserving the background and brand character. Move the foreground gradually darker or lighter until it passes, then inspect it in context. For text over photography, add a stable overlay or place the copy in a solid panel. A text shadow is rarely a dependable accessibility fix.
If you need to translate colours between design and development formats, the colour converter provides HEX, RGB, HSL and CMYK values. To build a usable palette from an existing visual, try the palette extractor, then test the chosen pairs separately.
Contrast is not the whole of accessibility
A passing ratio does not guarantee an accessible interface. Visitors also need clear focus states, keyboard access, meaningful labels, logical headings and alternatives for informative images. Colour should not be the only signal for success, error or selection.
A sensible review routine
- List the colours used for body text, headings, links and buttons.
- Test each against its actual background.
- Review hover, focus, error and disabled states.
- Check mobile layouts and text over images.
- Save approved combinations in the design system.
Contrast fixes are often small changes with an immediate effect on readability. Include them in a broader website audit so accessibility, performance, content and search signals improve together.