Accessibility

WCAG Text Contrast Checker

Check colour contrast ratios to ensure accessibility compliance with WCAG guidelines (Level AA and AAA).

WCAG Text Contrast Checker
Check colour contrast ratios to ensure accessibility compliance with WCAG guidelines

Advanced Batch Check

WCAG Guidelines:

  • Level AA: Minimum contrast ratio of 4.5:1 for normal text, 3:1 for large text (18pt or 14pt bold)
  • Level AAA: Minimum contrast ratio of 7:1 for normal text, 4.5:1 for large text

About this tool

Ensure your text meets accessibility standards with our WCAG Text Contrast Checker. Verify that your colour combinations meet the minimum contrast requirements for Level AA and AAA compliance. The tool checks contrast ratios according to WCAG guidelines, helping you create accessible content for users with visual impairments. Supports both single colour checks and batch processing of multiple colour pairs. Features include text/background colour selection, font size configuration, and detailed contrast analysis with pass/fail indicators for both AA and AAA compliance levels.

How to use the WCAG Text Contrast Checker

  1. Choose a Check Type: WCAG Compliance or Custom Ratio.
  2. Pick a Text Colour and Background Colour with the colour picker or by typing hex codes.
  3. Enter the Font Size (px), or a target for a Custom Ratio check, and click Check Contrast.
  4. To test several combinations, use Advanced Batch Check: click Add Pair for each one, then Check All Pairs.

Give us your feedback

Help us improve WCAG Text Contrast Checker!

Frequently asked questions

What contrast ratio does WCAG require?

WCAG Level AA needs at least 4.5:1 for normal text and 3:1 for large text. Level AAA raises that to 7:1 and 4.5:1. Large text means at least 18 point (24px) regular, or 14 point (about 18.7px) bold.

How is the contrast ratio calculated?

Each colour is converted to its relative luminance, a measure of brightness from 0 for black to 1 for white. The ratio is (lighter + 0.05) divided by (darker + 0.05), giving a range from 1:1 for identical colours to 21:1 for black on white.

Can I check more than one colour pair at once?

Yes. In the Advanced Batch Check section, click Add Pair for each text and background combination, set a size for each, then click Check All Pairs to see whether every pair passes AA and AAA.

Does the checker send my colours anywhere?

The contrast math runs in your browser, so results appear instantly with no sign-up. We log basic usage details, such as the colours and font sizes you test, to understand how the tool is used.

WCAG Text Contrast Checker screenshot