Color & Design

Color Contrast Checker

Test any text and background color pair against WCAG 2.2 AA and AAA contrast requirements, with instant pass/fail feedback and a live preview.

Text color

Hex

#1A73E8

RGB

26, 115, 232

HSL

214°, 82%, 51%

Background color

Hex

#FFFFFF

RGB

255, 255, 255

HSL

0°, 0%, 100%

Contrast ratio

4.51: 1

WCAG compliance

Higher ratios are more readable. 21:1 is pure black on white.

AA · Normal text (4.5:1)Pass
AA · Large text (3:1)Pass
AAA · Normal text (7:1)Fail
AAA · Large text (4.5:1)Pass
UI components & graphics (3:1)Pass

Live preview

See your color pair on both body and heading sizes.

The quick brown fox jumps over the lazy dog.

Normal body text at 16 pixels. WCAG 2.2 measures contrast between the foreground text and its immediate background — this preview shows the combination you entered above exactly as a user would see it.

What is a Contrast Checker?

A contrast checker measures the luminance difference between two colors and reports it as a ratio between 1:1 (identical) and 21:1 (pure black on pure white). Accessibility guidelines use that ratio to decide whether text is readable for users with low vision, color-blindness, or screens viewed in bright sunlight. This tool follows WCAG 2.2 — the same standard referenced by the ADA in the US, the European Accessibility Act, and most corporate design systems. Enter any two colors and you get an instant pass/fail across the five WCAG thresholds, plus a live preview at both body and heading sizes. Everything runs in your browser — no upload, no tracking, no account.

How to check color contrast

1
Enter your text color
Paste a hex code or use the color picker for the foreground (text) color. The tool also accepts 3-digit shorthand like #03A.
2
Enter your background color
Do the same for the background. If you only know the text color, leave the background on white (#FFFFFF) for the default test.
3
Read the ratio
The big ratio number updates as you type. A ratio under 3.0 will fail even the loosest WCAG threshold for normal text.
4
Check the WCAG badges
The five badges show pass/fail for AA normal, AA large, AAA normal, AAA large, and UI-components thresholds. AA is the usual legal minimum; AAA is the enhanced target for key content.
5
Preview and copy
Verify the preview looks right at heading and body size, then use Copy CSS to grab `color:` and `background-color:` declarations for your stylesheet.

WCAG contrast formula

For each channel (R, G, B scaled to 0–1):
  c_linear = (c ≤ 0.03928) ? c / 12.92 : ((c + 0.055) / 1.055)^2.4
 
Relative luminance:
  L = 0.2126·R_linear + 0.7152·G_linear + 0.0722·B_linear
 
Contrast ratio:
  ratio = (L_light + 0.05) / (L_dark + 0.05)
  where L_light = max(L1, L2) and L_dark = min(L1, L2)

The formula comes from WCAG 2.x and applies a gamma-correction curve to each sRGB channel before computing luminance. The weights (0.2126, 0.7152, 0.0722) reflect human cone sensitivity to red, green, and blue light. Adding 0.05 to both terms prevents division-by-zero when one color is perfect black. Ratios range from 1:1 (identical colors) to 21:1 (pure black on pure white).

Reference: WCAG 2.2 — Contrast (Minimum) 1.4.3

Examples

Pair	Ratio & verdict
#000000 on #FFFFFF	21:1 — passes every threshold The canonical maximum contrast. Used for long-form reading UIs.
#1A73E8 on #FFFFFF	4.63:1 — passes AA normal, fails AAA normal Google blue on white. Legal for body text, not quite AAA.
#808080 on #FFFFFF	3.95:1 — fails AA normal, passes AA large Medium gray on white — fine for headings, too light for paragraphs.

Common use cases

Audit a marketing page or landing page against WCAG AA for compliance
Validate a new design-system palette before rolling it out to components
Test a dark-mode variant to ensure text remains readable on dark surfaces
Check whether a brand color has enough contrast against white or a photo overlay
Debug a failing Lighthouse or axe-core accessibility audit
Compare proposed text colors against your canonical background before a PR review
Pick a button label color that still passes contrast over a colored fill

Related tools

Color Converter

Convert between HEX, RGB, and HSL with live swatches, sliders, and instant copy.

Age Calculator

Calculate your exact age in years, months, and days from any date of birth.

BMI Calculator

Check body mass index from height and weight using metric or imperial units.

Percentage Calculator

Work out percentages, percentage change, and percentage of a total in seconds.

Frequently asked questions

Is my color data sent to a server?

No. All contrast math happens in your browser. Nothing you type is uploaded, logged, or stored.

What's the difference between AA and AAA?

AA is the baseline WCAG compliance level required by most accessibility laws (ADA in the US, EAA in the EU). AAA is the enhanced target recommended for government and critical-content sites. AA normal text requires 4.5:1, AAA normal requires 7:1.

What counts as 'large text' for WCAG?

WCAG defines 'large' as 18pt (typically 24 CSS pixels) regular, or 14pt (19 CSS pixels) bold and above. Anything smaller is 'normal text' and held to the stricter 4.5:1 threshold for AA.

Why does 0.05 appear in the ratio formula?

It's a flare constant that models ambient light reflected off the screen surface. Without it, any color against pure black would produce an infinite ratio, which breaks both the math and reality — real displays always emit some baseline light.

Does this tool account for font rendering or anti-aliasing?

No — it follows the official WCAG formula, which operates on nominal color values, not rasterized pixels. In practice anti-aliasing can nudge perceived contrast slightly, but the WCAG ratio is what assistive-technology auditors and legal reviewers use.

Should I use APCA instead of WCAG for contrast?

APCA (the algorithm proposed for WCAG 3.0) is more perceptually accurate, particularly for light-on-dark text, but WCAG 2.2 is still the current legal standard and the metric most audits report against. Use WCAG 2.2 for compliance; experiment with APCA for design-system research.

What contrast ratio should icons and UI components hit?

WCAG 1.4.11 requires a 3:1 ratio between a UI component's visual boundary and its adjacent color, and between parts of a graphic needed to understand content. The fifth badge on this tool reports that threshold specifically.

Why did my color fail even though it 'looks fine' to me?

WCAG is calibrated to the hardest-to-see cases — low-vision users, bright ambient light, cheap displays. A pair that looks fine to you in a dim office may be unreadable to a user with 20/40 vision outdoors. Trust the ratio, not your eyes.

Last updated 2026-04-21

What is a Contrast Checker?

How to check color contrast

Enter your text color

Paste a hex code or use the color picker for the foreground (text) color. The tool also accepts 3-digit shorthand like #03A.

Enter your background color

Do the same for the background. If you only know the text color, leave the background on white (#FFFFFF) for the default test.

Read the ratio

The big ratio number updates as you type. A ratio under 3.0 will fail even the loosest WCAG threshold for normal text.

Check the WCAG badges

The five badges show pass/fail for AA normal, AA large, AAA normal, AAA large, and UI-components thresholds. AA is the usual legal minimum; AAA is the enhanced target for key content.

Preview and copy

Verify the preview looks right at heading and body size, then use Copy CSS to grab `color:` and `background-color:` declarations for your stylesheet.

WCAG contrast formula

For each channel (R, G, B scaled to 0–1):
  c_linear = (c ≤ 0.03928) ? c / 12.92 : ((c + 0.055) / 1.055)^2.4
 
Relative luminance:
  L = 0.2126·R_linear + 0.7152·G_linear + 0.0722·B_linear
 
Contrast ratio:
  ratio = (L_light + 0.05) / (L_dark + 0.05)
  where L_light = max(L1, L2) and L_dark = min(L1, L2)

Examples

Pair	Ratio & verdict
#000000 on #FFFFFF	21:1 — passes every threshold The canonical maximum contrast. Used for long-form reading UIs.
#1A73E8 on #FFFFFF	4.63:1 — passes AA normal, fails AAA normal Google blue on white. Legal for body text, not quite AAA.
#808080 on #FFFFFF	3.95:1 — fails AA normal, passes AA large Medium gray on white — fine for headings, too light for paragraphs.

Common use cases

Audit a marketing page or landing page against WCAG AA for compliance

Validate a new design-system palette before rolling it out to components

Test a dark-mode variant to ensure text remains readable on dark surfaces

Check whether a brand color has enough contrast against white or a photo overlay

Debug a failing Lighthouse or axe-core accessibility audit

Compare proposed text colors against your canonical background before a PR review

Pick a button label color that still passes contrast over a colored fill