Contrast Checker

What a contrast ratio actually measures

Contrast ratio compares the relative luminance of two colours — how much light each one emits — on a scale from 1:1 (identical) to 21:1 (pure black on pure white). It is deliberately not a measure of how different two hues look. Red and green can be vividly different to most people and still fail badly, which is why hue difference is never a substitute for running the numbers.

Large text has an easier bar for a reason

WCAG counts text as large at 18.66px bold or 24px regular, and relaxes the requirement to 3:1. Bigger glyphs have thicker strokes and more area, so the eye separates them from the background more easily. This is also why a ratio that passes for your headline can fail badly for the caption underneath it in the same colour.

The colour pairs that fail most often

Mid-grey placeholder text on a white field, white text on a mid-tone brand colour, and any pale accent used for links. All three look refined on a bright desktop display and become unreadable on a phone outdoors. If a pair lands between 3:1 and 4.5:1, it is not a borderline pass — it is a fail for anything except large text.

How to use the contrast checker

1. Set your text colour and background colour, with the swatch picker or by pasting a HEX value.
2. Read the ratio and check which WCAG levels pass — AA at 4.5:1 is the practical minimum for body copy.
3. If it fails, use the suggested closest passing colours: each moves lightness only, so the colour stays in your palette.
4. Or nudge the lightness sliders yourself to find the exact point where the pair starts passing.
5. Look at the live preview, not just the number: heading, body and caption are shown at realistic mobile sizes.
6. Copy the shareable link to send the exact pair to a developer or attach it to a bug report — the colours are encoded in the URL.

Use it with

• Colour Blindness Simulator — See your screens the way users with each type of colour vision deficiency see them.
• Color Picker from Image — Drop in a screenshot or photo and pull out every colour in it, ready to paste into your app's theme.
• Hex to RGB Converter — Convert between HEX, RGB, HSL and the platform formats iOS and Android expect.

Frequently asked questions

What contrast ratio do I need to pass WCAG?

4.5:1 for normal body text and 3:1 for large text (18.66px bold or 24px regular) to meet AA. AAA raises those to 7:1 and 4.5:1. Interactive components and their boundaries need at least 3:1.

Is WCAG AA good enough for a mobile app?

AA is the level most legislation and app store accessibility guidance references, so treat it as the floor. On mobile it is worth exceeding, because phones get used in direct sunlight and at low brightness where a bare pass stops being readable.

Does contrast apply to icons and buttons, not just text?

Yes. WCAG 1.4.11 requires at least 3:1 for the visual boundaries of interactive components and meaningful graphics. A pale grey outline on a white button fails, even when the label inside it passes.

How do I fix a failing contrast ratio?

Change lightness, not hue. Darkening the text or lightening the surface raises the ratio while keeping the colour recognisably yours — swapping to a different hue usually breaks the palette for no accessibility gain. This tool suggests the closest passing colour in each direction so you can see the smallest change that clears AA.

Can I share a contrast result with my team?

Yes. “Copy shareable link” encodes both colours in the URL, so anyone opening it sees the same pair already loaded. It is the quickest way to attach an exact failure to a bug report or design review rather than describing it in words.

Is this contrast checker free?

Completely — unlimited checks, no account, no cap. A free account is only needed to copy the generated report out.