UICheck
Get started

FreeFree tool · no account needed

Free color contrast checker

Is your text easy to read? Two colours in, the WCAG contrast ratio out, with AA and AAA results for text, large text and icons. If it fails, pick the nearest colour that passes in one click.

Large heading text

Body text at 16px. The quick brown fox jumps over the lazy dog, and this is how your visitors will read it.

Small print at 13px: the hardest to read.

Outlined button

Contrast ratio

3.23:1

Large text only

  • WCAG AA · Normal text (4.5:1)Body text under 24px (or 18.66px bold)
  • WCAG AA · Large text (3:1)24px and up, or 18.66px bold and up
  • WCAG AAA · Normal text (7:1)The enhanced level for body text
  • WCAG AAA · Large text (4.5:1)The enhanced level for large text
  • WCAG AA · Icons and field edges (3:1)Buttons’ outlines, icons, focus rings (1.4.11)

The nearest text colour that passes

What it checks

Everything WCAG asks about colour contrast

Two colours, one answer

  1. 1

    Enter your colours

    Type a hex code or pick a colour for the text and its background.

  2. 2

    Read the ratio

    From 1:1 (no contrast) to 21:1 (black on white), with every WCAG level it passes.

  3. 3

    Fix it in one click

    Take the nearest colour that passes AA or AAA, and see it in the preview.

Guide

Colour contrast, explained

  1. 01

    What the ratio means

    Contrast compares how light two colours are, from 1:1 (the same colour) to 21:1 (black on white). WCAG asks for at least 4.5:1 for normal text and 3:1 for large text and for icons and field edges.
  2. 02

    Why light grey fails so often

    Grey text on white looks elegant on a bright designer screen but fades on a phone in sunlight or for people with low vision. #999 on white is only 2.8:1; #767676 is the lightest grey that passes AA on white.
  3. 03

    Text on pictures and gradients

    A single colour pair can’t judge text over a photo, because the background changes under every letter. UICheck’s full checks measure the real pixels behind each word on your page and report only where it gets too faint.
  4. 04

    Check the whole page, not one pair

    A page has dozens of colour pairs, plus hover and focus states and dark mode. The Website Accessibility Checker finds every faint text on a page at once.

Check your own page now

Free, in a real browser, about a minute. No account needed.

Run the free check

Questions

Is this a WCAG contrast checker?

Yes. It is a contrast ratio checker that uses the WCAG 2.2 formula and shows the AA and AAA results for normal text, large text and non-text elements such as icons and field borders.

What contrast ratio do I need?

4.5:1 for normal text and 3:1 for large text (24px and up, or 18.66px bold) to meet WCAG AA, the level most laws refer to. AAA asks for 7:1 and 4.5:1. Icons, button outlines and focus rings need 3:1.

How is the ratio calculated?

With WCAG’s formula: the relative luminance of the lighter colour plus 0.05, divided by that of the darker colour plus 0.05. The result is cut, never rounded up, so 4.499:1 never shows as passing.

Does it work for text on images?

Not with two colours. A full UICheck check measures the pixels behind each piece of text on the real page instead.

Is anything sent to a server?

No. The checker runs entirely in your browser.

Free, no account needed

More free tools

All free tools

One colour pair is easy. A whole site isn’t.

Free account, 5 checks a day: every faint text on your pages found at 5 screen sizes, with the colour that fixes it.

Start freeSee pricing