legible

Can you read it?

WCAG 2.2 and APCA for text and background. If the pair fails, you get the closest shade that passes.

Any CSS colour works: #hex, rgb(), hsl(), oklch() or a name like rebeccapurple.

WCAG ratio–

APCA Lc–

WCAG 2.2 criteria

  • AA normal text
  • AA large text
  • AAA normal text
  • AAA large text
  • Icons and borders (1.4.11)
  • AA with any kind of colour blindness

Smallest tweak

The closest colour to yours that passes, changing only lightness (in OKLCH, so the hue stays put).

Search by

With typical vision

For any kind of vision

These pass with typical vision and with all four simulated kinds of colour blindness at once.

How other people see it

A simulation of the most common kinds of colour blindness (Machado's 2009 model), with the contrast left in each case. Most useful when the pair relies on hue, like red and green.

By size

Your colours in the usual roles of text. On the right, whether that size meets AA.

    The whole palette at once

    Paste your colours, one per line or comma-separated (up to 12), and see every combination.

    Measure with

    Rows: text colour. Columns: background colour. AA18 = passes for large text only. With “any kind of vision”, each cell shows the lowest ratio across typical vision and the four kinds of colour blindness.

    How it's calculated

    WCAG 2.2
    Ratio between the relative luminance of both colours, from 1:1 to 21:1. Normal text needs 4.5:1 (AA) or 7:1 (AAA); large text (24 px, or 18.66 px bold) needs 3:1 or 4.5:1.
    APCA
    The candidate method for WCAG 3. It accounts for polarity (light on dark is not the same as dark on light) and gives an Lc value: 90 is ideal for long text, 75 the minimum for body text, 60 for content text, 45 for headings and 30 for icons.
    Transparency
    If the text is translucent, it is blended with the background before calculating. If the background is, it is assumed to sit on white.