Color Contrast Checker: what it does and how to use it

Contrast ratio measures the difference in relative luminance between two colours, on a scale from 1:1 (identical) to 21:1 (black on white). WCAG sets the thresholds that matter: 4.5:1 for normal text at AA, 3:1 for large text, and 7:1 for normal text at the stricter AAA level. Those numbers are not arbitrary - they come from research into what remains readable for people with moderately reduced vision, which by middle age describes a large share of any audience. Insufficient contrast is consistently the single most common accessibility failure found in automated audits of real websites, and the usual cause is designers choosing light grey text on white because it looks refined on a high-quality monitor in a controlled room. It stops being readable on a phone in sunlight, on a cheap laptop screen, or for anyone over about fifty. Checking takes seconds; the fix is usually darkening one colour slightly. This runs entirely in your browser.

You should not have to open an IDE to format a snippet from Slack, tidy a JSON blob, or check a hash. Paste it here, copy the result, move on.

Color Contrast Checker is a good fit when checking a brand palette before it is locked into a design system.

The useful part

Color Contrast Checker is built around a few practical wins, not a long feature list:

• Gives the exact ratio and the pass or fail against every WCAG threshold at once.
• Catches the most common accessibility failure on the web before it ships.
• Distinguishes normal from large text, which have genuinely different requirements.
• Runs in your browser with no account or limit.
• Fast enough to check a whole palette in a couple of minutes.

Do this, in order

1. Enter your text colour. Paste a HEX value or pick one. This is the foreground - the colour the words are drawn in.
2. Enter the background colour. The actual colour behind the text, not the page background if a card or overlay sits between them.
3. Read the ratio and pass marks. You get the numeric ratio plus whether it passes AA and AAA for normal and large text.
4. Adjust if it fails. Darkening the text is usually less disruptive to a design than changing the background.

Who it is for

• Checking a brand palette before it is locked into a design system.
• Fixing accessibility audit failures on an existing site.
• Meeting a legal or procurement requirement for WCAG AA compliance.
• Validating that placeholder and helper text is readable, not just body copy.
• Deciding whether white or black text works better on a brand colour.

If you want a clean result

• Aim for AA (4.5:1) as the baseline for body text. AAA is worth targeting for long-form reading but is often impractical for a brand palette.
• Check the states as well as the default - hover, disabled, placeholder and visited link colours all fail more often than body text.
• Large text means 24px regular or 18.66px bold and above. Do not apply the 3:1 allowance to 16px body copy.
• Text over an image needs a solid overlay or text shadow, because contrast varies across the photograph.
• Contrast is measured against what is directly behind the text - a card colour, not the page colour underneath it.

Common mix-ups

• Using light grey on white because it looks elegant on a good monitor. It routinely fails and is the most common failure of all.
• Applying the large-text threshold to normal-size text, which is not what the standard permits.
• Checking body copy only, then leaving placeholder text, disabled buttons and captions failing.
• Assuming a colour that passes on white also passes on your dark theme. Both directions need checking.
• Treating contrast as optional polish. In many jurisdictions accessibility is a legal requirement, not a preference.

Private by default

Color Contrast Checker runs in your browser. The file or text you paste stays on your device. There is no account, and nothing is stored on a ToolBox server for this job.

Related tools worth opening next

If this is one step in a longer job, these usually come after it:

• RGB to HEX Converter - Drag RGB sliders and get HEX, HSL, HSV and CMYK live
• HEX to RGB Converter - Convert HEX to RGB, RGBA, HSL, HSV, CMYK and decimal with live preview
• CSS Gradient Generator - Visually build CSS gradients

Before you ask

How do I check colour contrast?

Enter your text and background colours above. You get the exact contrast ratio and whether it passes WCAG AA and AAA for both normal and large text.

Is this contrast checker free?

Yes. No account, no limit, and it runs entirely in your browser.

What contrast ratio do I need to pass WCAG?

AA requires 4.5:1 for normal text and 3:1 for large text. AAA requires 7:1 and 4.5:1 respectively. AA is the level most legal requirements and procurement standards reference.

What counts as large text?

24px (18pt) at regular weight, or 18.66px (14pt) bold and above. Anything smaller is normal text and needs the full 4.5:1 - applying the large-text allowance to 16px body copy is a common misreading.

Why does contrast matter?

Because low contrast is unreadable for people with reduced vision, in bright sunlight, or on poor-quality screens. It is also the most frequently flagged issue in accessibility audits and, in many jurisdictions, a legal requirement rather than a nicety.

Does contrast apply to icons and buttons too?

Yes. WCAG requires 3:1 for meaningful non-text elements - icons that convey information, form field borders, focus indicators. Purely decorative graphics are exempt.

How do I fix failing contrast without changing my brand colours?

Usually by darkening the text rather than altering the background, or by using the brand colour for large headings and accents where 3:1 applies while keeping body text a darker neutral.

Does this check colour blindness?

Contrast ratio is luminance-based, which helps but is not a full colour-blindness check. The separate rule is never to rely on colour alone to convey meaning - always pair it with text, an icon or a pattern.

Open the Color Contrast Checker when you are ready. It is free, and you do not need an account.