What a colour contrast ratio means
Contrast ratio measures the difference in relative luminance between a foreground colour and the colour behind it. WCAG uses relative luminance rather than a simple difference between hex values because human vision does not perceive every colour channel equally. The formula compares the lighter and darker luminance values and produces a ratio from 1:1, where the colours have the same luminance, to 21:1, the maximum contrast of black against white.
For website work, you do not need to calculate the luminance values by hand. Enter the text and background colours in the checker and it calculates the ratio for you. The important point is that contrast is assessed between colours that actually appear next to each other. Text placed over a photograph, gradient or semi transparent overlay can therefore need more careful testing than text on a flat background.
WCAG 2.2 contrast requirements explained
WCAG 2.2 Success Criterion 1.4.3 requires at least 4.5:1 contrast for normal text at Level AA and at least 3:1 for large text. For this rule, large text means at least 18pt, which is 24px in CSS terms, or at least 14pt, about 18.66px, when bold. Fonts with unusually thin strokes can still be difficult to read even when they meet the numerical threshold.
At Level AAA, Success Criterion 1.4.6 raises the thresholds to 7:1 for normal text and 4.5:1 for large text. Level AAA is not the general conformance target for most sites, but the stronger ratio can be useful for important reading content or audiences who benefit from greater contrast.
Contrast also applies beyond text. Under Success Criterion 1.4.11, visual information needed to identify user interface components and meaningful graphical objects generally needs at least 3:1 against adjacent colours. That can include form control boundaries, important icons and focus indicators. The exact requirement depends on what visual information is needed to identify the component or state.
Common contrast problems on real websites
Low contrast often enters a site through design systems rather than isolated mistakes. Light grey body copy can look refined on a designer's monitor but fail at ordinary reading sizes. Brand colours that work well as large blocks can be too light for small text, especially when white text is placed over a bright brand colour.
Text over hero photographs and gradients needs particular care because the background changes behind individual letters. A dark overlay, solid text panel or different image crop is usually more reliable than choosing a text colour that only works over part of the image. Placeholder text in forms should also remain readable, but it should not replace a visible label.
Links inside paragraphs need more than an acceptable text contrast ratio when colour is the only visual cue. Underlining is a straightforward way to keep links distinguishable. Buttons, input borders, icons and keyboard focus outlines can fail for a different reason: the text may pass while the component boundary or focus state is too faint. Test normal, hover and focus states, not just the default design.
Using colour suggestions and the page scan
The calculator accepts hex or RGB values and shows the measured ratio with pass or fail results for WCAG 2.2 AA and AAA text thresholds, plus the 3:1 check used for relevant non text components. If a text colour fails, the tool suggests the nearest colour with the same hue that reaches AA and AAA. Treat that suggestion as a practical starting point, then review it within the full design system.
Changing one colour can affect headings, links, buttons, cards and states across a website. Update the source design token, theme setting or CSS custom property where possible instead of patching each occurrence separately. In WordPress, the controlling value may sit in Global Styles, a theme palette or a page builder's colour settings.
The page scanner checks a supplied web page and lists failing text and background colour pairs it can detect. Use that list to find repeated combinations, fix the shared style and scan again. If an issue involves imagery, transparency, unusual states or a component that only appears after interaction, inspect it manually as well. For wider accessibility work, use the WCAG 2.2 accessibility checker or read about website accessibility.