Check text and background contrast before you ship.
Enter foreground and background colors to calculate the contrast ratio and see whether the pair meets common WCAG 2.2 AA or AAA thresholds.
✓ Local browser processingAccessible color pairs are easier to read.
What the ratio means
The contrast ratio is calculated from the relative luminance of the foreground and background colors. A higher ratio means a stronger luminance difference. This tool reports the numeric ratio and compares it with common WCAG 2.2 text thresholds rather than judging the design as a whole.
WCAG 2.2 thresholds used here
For normal text, WCAG 2.2 Success Criterion 1.4.3 specifies at least 4.5:1 for Level AA and 7:1 for Level AAA. Large-scale text has a lower minimum of 3:1 for AA and 4.5:1 for AAA. These checks apply to text contrast; non-text interface components have different requirements.
How to use the result
Check the actual text size, weight and visual context before making a design decision. A passing ratio does not prove that an entire page conforms to WCAG because accessibility also covers focus indicators, keyboard access, semantics, resizing, motion, forms and many other requirements.
Contrast checker FAQ
Does a passing color ratio mean my page is WCAG conformant?
No. This tool checks color contrast only. WCAG conformance involves many additional success criteria, and different content can have different requirements.
What counts as large text for the WCAG check?
WCAG defines large-scale text by font size and weight rather than by a single universal CSS pixel value. Use the current WCAG understanding guidance when making a formal accessibility assessment; this page only compares the ratio against the large-text thresholds.
Does this tool send my colors to a server?
No. The calculation runs locally in the browser. Only the hexadecimal color values you enter are used by the page to calculate the ratio and preview the sample.
Reference: W3C Web Content Accessibility Guidelines (WCAG) 2.2.
What a contrast ratio tells you
A contrast ratio compares the relative luminance of foreground and background colours. Dark text on a light background usually has higher contrast than mid-grey text on a mid-grey background. The ratio is useful for checking one important accessibility condition, but it does not measure font readability in every context, the quality of the wording, keyboard access or the accessibility of the whole interface.
How to use the result in a design review
- Enter or select the foreground colour used by the text or icon.
- Enter the actual background colour behind that element.
- Check the reported ratio against the relevant WCAG 2.2 threshold for the text size and weight.
- Repeat for hover, focus, disabled, error and other states that users can encounter.
- Review the colours in the real layout, including gradients, images and transparent overlays.
For example, a grey label may pass on a white panel but fail when displayed on a tinted card. A colour combination that passes for large text may not meet the normal-text threshold. The checker compares the values you provide; it cannot automatically know which colour is behind each element in a complex page or whether a component meets every WCAG success criterion.
Accessibility checks beyond colour
Do not communicate status through colour alone. Pair error, success and warning colours with clear text, icons or other cues. Also check visible focus, logical headings, keyboard interaction, form labels, text zoom and the actual content. Contrast standards are a valuable measurable baseline, not a substitute for testing the experience with different users and assistive technology.
Contrast-checker questions
Why can the same colours look different on two screens?
Display calibration, brightness, ambient light and colour profiles can alter the perceived appearance. The mathematical ratio remains tied to the selected values, not every physical display.
Does passing contrast make the page accessible?
No. It checks the specified colour pair only. The rest of the interface needs its own accessibility checks.