ACCESSIBILITY LAB

Accessibility contrast checker

Check WCAG contrast between text and background colors so UI stays readable for more people.

Set foreground and background HEX, read the ratio and pass/fail grades, then jump to the color-blind simulator if needed.

Live preview

A heading should read at a glance

Body copy has to stay readable without strain. If the gray is too light, low-vision readers lose the sentence.

Contrast ratio

0.00:1

Foreground
Background
Font weight

WCAG 2.2 test results

Normal text · AA

1.4.3 — minimum for paragraphs and labels

4.5:1

Normal text · AAA

1.4.6 — enhanced level for long reading

7:1

Large text · AA

18pt headings, or 14pt bold and larger

3:1

Large text · AAA

Enhanced level for large type

4.5:1

UI components · AA

1.4.11 — button edges, icons, and focus

3:1

Sample pairs

Nova brand pairs plus teaching examples that pass or fail.

Simulate color vision →

How to read the test

Normal text · AA

Body copy, form labels, and links need at least 4.5:1. 7:1 is AAA and safer for long paragraphs.

Large text · AA

Large text is at least 24px regular or about 19px bold. For that type, the AA bar is 3:1.

UI components · AA

Text-free icons, control borders, and focus marks need at least 3:1 against adjacent background — even with no text inside.

Go deeper

Why you’ll love this

Use the contrast checker before shipping UI so text and surfaces are actually readable — not just pretty on your calibrated display.

How to jump in

  1. Set foreground and background

    Enter HEX values or start from a preset pair.

  2. Read the WCAG result

    See pass/fail for normal text, large text, and UI components.

  3. Adjust until it passes

    Tune colors toward 4.5:1 or 3:1 thresholds, then apply them back to your palette.

What you walk away with

  • WCAG 2.2 checks
  • Live text and UI preview
  • Quick starter presets
  • Links to CVD simulator and Color Lab

Where it shines

Accessible UI design

Validate buttons, links, and body copy before handoff.

Brand palette audits

Find brand pairs that fail as text colors.

UX coursework

Include WCAG evidence in accessibility case studies.

Quick answers

What contrast ratio should I aim for?

Normal text is typically 4.5:1 (AA) and large text 3:1; AAA is stricter.

Does this replace real user testing?

No. It is a technical baseline. Still test with diverse users for real products.

Why can a passing pair still look weak on mobile?

Ambient light, brightness, and font rendering matter — always verify on real devices.

You’ll probably want these too

◇ Product Design →
Palette generator & color wheel Generate fast like Coolors, with harmony theory, design-system shades, accessibility checks, and real UI preview — without the clutter. Color vision simulator See how palettes and UI screenshots look under red-, green-, and blue-cone deficiencies — then fix pairs that collapse and keep contrast checking separate. Themed palettes Browse ready-made 4-color palettes by mood — or describe a project topic and let AI generate fresh themes.

All tools →