Color Contrast Checker

About the Color Contrast Checker

This free colour contrast checker measures the contrast ratio between a text colour and a background colour, and tells you whether it passes WCAG AA and AAA for normal and large text.

It runs in your browser — nothing is uploaded.

What the ratio means

Contrast ratio compares the relative luminance of two colours — how much light each one emits or reflects — on a scale from 1:1 to 21:1.

• 1:1 — identical colours, text invisible
• 21:1 — pure black on pure white, the maximum possible
• 4.5:1 — the minimum for ordinary body text under WCAG AA

The important detail is that the calculation uses luminance, not how different the colours look. Two colours can feel very different and still fail. Red on green is the classic example: visually striking, almost the same luminance, and close to unreadable for many people.

This is also why you cannot judge contrast by eye. Designers work on good monitors in controlled light with young eyes, and the light grey that looks elegant in the studio disappears on a phone in sunlight.

The thresholds

WCAG sets two levels, and the requirement depends on the size of the text.

Level AA — the usual target, and what most accessibility laws reference:

• 4.5:1 for normal text
• 3:1 for large text
• 3:1 for user interface components and meaningful graphics

Level AAA — a stricter standard, appropriate for content aimed at readers with low vision:

• 7:1 for normal text
• 4.5:1 for large text

Large text means 18pt (24px) or larger, or 14pt (18.66px) bold or larger. Bigger letters have thicker strokes, so they survive lower contrast.

AA is the realistic target for most sites. AAA is difficult to hit across a whole design and is not expected for general content.

Why this affects far more people than you think

It is easy to file contrast under "edge case". The numbers say otherwise.

About 1 in 12 men and 1 in 200 women have some form of colour vision deficiency — roughly 300 million people worldwide. Red-green is by far the most common.

Almost everyone over 40 experiences declining contrast sensitivity, and the lens of the eye yellows with age, shifting how blues are perceived.

Everyone, sometimes. Contrast failures affect people with perfect vision reading outdoors, on a dimmed screen, on a cheap monitor, or through a smeared phone screen on a bus. Accessibility improvements here are simply legibility improvements for all users.

There is a legal dimension too. WCAG 2.1 AA is referenced by the Americans with Disabilities Act in practice, by Section 508 in US federal procurement, by the European Accessibility Act, and by equivalent rules in the UK, Canada and Australia. Contrast is among the most frequently cited failures in accessibility complaints, largely because it is so easy to measure.

Where designs usually fail

• Light grey placeholder text in form fields — extremely common, almost always failing
• White text on a photograph — the ratio changes across the image; add an overlay or a scrim
• Brand colours used as text — a mid-tone corporate blue or orange on white often lands near 3:1
• Disabled states — exempt from the requirement, but still worth keeping legible
• Links distinguished only by colour — if a link is the same lightness as the text around it, underline it
• White text on yellow, or grey on grey — the perennial offenders
• Dark mode — pure white on pure black is technically 21:1 but causes halation; slightly softened colours read better
• Error messages in red on a white background — often below 4.5:1 for the exact message that matters most

Fixing a failing pair

When a combination fails, change lightness rather than hue. You can usually keep a brand colour recognisable while darkening or lightening it enough to pass.

Practical approaches:

Keep the brand colour for large elements — headings, buttons, icons — where the threshold is 3:1, and use a darker variant for body text.

Adjust one side only. Darkening the text is usually less disruptive than changing the background.

On images, add a scrim — a semi-transparent dark layer between photo and text. It guarantees the ratio regardless of what the picture shows.

Do not rely on colour alone to convey meaning. Add an icon, a label or an underline, so the information survives for someone who cannot distinguish the colours at all.

How to use it

• Pick a text colour and a background colour
• See the contrast ratio and the AA / AAA pass or fail badges
• Read the live preview to judge it for yourself, then adjust the colours

Good to know

• Test the actual colours, including any opacity. Text at 70% opacity is effectively a different colour against its background.
• Check both themes. A palette that passes in light mode can fail in dark mode.
• Logos are exempt from the contrast requirement, as is incidental and decorative text.
• Thin fonts need more contrast in practice than the ratio suggests. The standard does not measure stroke weight, but your readers do.
• Check on a phone in daylight if you can. It is a more honest test than any monitor.
• Passing is a floor, not a target. 4.5:1 is the minimum acceptable, not the goal.

Common questions

What is a good contrast ratio?

For ordinary body text, at least 4.5:1 to meet WCAG AA — the level most accessibility laws reference. Large text, meaning 18pt/24px or 14pt/18.66px bold and above, needs 3:1. The stricter AAA level asks for 7:1 on normal text. Treat these as minimums rather than targets; comfortable reading usually sits well above them.

What is the difference between WCAG AA and AAA?

AA is the practical standard that most regulations and organisations adopt, requiring 4.5:1 for normal text and 3:1 for large text. AAA is stricter, at 7:1 and 4.5:1, and is intended for content specifically serving readers with low vision. AAA is hard to achieve across an entire design and is not expected for general-purpose sites.

Why does my colour combination fail when it looks fine to me?

Because contrast is calculated from luminance, not from how different two colours appear. Red and green look strongly different yet have similar luminance, which is why that pairing fails. Personal judgement is also unreliable: designers typically work on good screens in controlled lighting with good eyesight, conditions most readers do not share.

Does contrast matter for images and icons?

Yes. WCAG requires 3:1 for user interface components and for graphics that carry meaning, such as icons conveying status or the border of a form field. Purely decorative images and logos are exempt. Text placed over a photograph is the common problem, since the ratio changes across the picture — a semi-transparent overlay solves it.

How do I fix a failing colour pair without losing my brand colour?

Adjust lightness rather than hue. A darker or lighter version of the same colour usually stays recognisably on-brand while clearing the threshold. You can also keep the original for headings, buttons and icons, where only 3:1 is required, and use a darker variant for body text where 4.5:1 applies.

Is pure black on pure white the best choice?

It is the maximum at 21:1, but not necessarily the most comfortable. Very high contrast can cause halation — a glowing effect around letters — particularly in dark mode and for some readers with dyslexia or astigmatism. A very dark grey on an off-white, or a softened white on a dark grey, often reads more comfortably while still passing easily.

Are my colour choices sent anywhere?

No. The ratio is calculated in your browser as you pick colours, so nothing is transmitted or stored and the tool works offline.

Related tools

• Color Picker — find and convert colours between HEX, RGB and HSL
• Image Color Picker — pull a colour out of an image
• Color Palette from Image — build a palette, then test it here
• CSS Gradient Generator — check text contrast at both ends of a gradient