Tool 04 — Color

WCAG Contrast Checker

WCAG 2.1 AA/AAA contrast ratios. Pick foreground and background colors — results update instantly.

Deeper Dive

WCAG contrast explained: AA, AAA, and when it actually matters→

▶ Foreground (Text)

Click swatch to open picker

▶ Background

Click swatch to open picker

21.0 : 1

Contrast Ratio (WCAG 2.1)

▶ Live Preview

Normal text — 16px / 12pt (AA requires 4.5 : 1)

The quick brown fox jumps over the lazy dog. Pack my box with five dozen liquor jugs. Normal body copy at 16px.

Large text — 24px / 18pt (AA requires 3 : 1)

Section Heading or Large UI Text

Bold large text — 19px / 14pt bold (AA requires 3 : 1)

Bold Heading at 14pt

Small text — 12px / 9pt (AAA requires 7 : 1)

Caption or metadata text. Use sparingly and only for non-critical information.

▶ Copy as CSS

What is WCAG and why does contrast ratio matter?

WCAG (Web Content Accessibility Guidelines) is the international standard for digital accessibility, published by the W3C. The contrast ratio requirement exists because users with low vision, color blindness or poor display calibration may not be able to read text that lacks sufficient luminance contrast against its background. WCAG 2.1 defines contrast as the ratio of the relative luminance of the lighter color to the relative luminance of the darker color, expressed as a number between 1:1 (no contrast) and 21:1 (black on white). Conformance Level AA — required by most accessibility laws including the EU Web Accessibility Directive and the ADA — sets a minimum of 4.5:1 for normal text and 3:1 for large text (18pt+ or 14pt+ bold).

AA versus AAA: which level should you target?

WCAG AA (contrast ratio 4.5:1 for normal text, 3:1 for large text) is the legally required minimum for public-sector websites in most jurisdictions and the expected standard for commercial web products. WCAG AAA (7:1 for normal text, 4.5:1 for large text) is the enhanced level — recommended for text-heavy content where maximum readability is critical, such as body copy, legal documents and healthcare interfaces. The W3C notes that AAA conformance cannot always be achieved for all content, and it is not recommended as a blanket requirement for entire sites. A pragmatic approach is to target AA across the board and AAA for primary body copy and critical UI text.

Large text and bold text rules

WCAG defines large text as text at 18pt (24px) or larger, or 14pt (approximately 18.67px) or larger in bold. These thresholds exist because larger or bolder text is easier to read at lower contrast due to its greater stroke weight and visual prominence. Large text requires a contrast ratio of only 3:1 to pass AA, compared to 4.5:1 for normal text. This matters for interface design: a heading at 24px can use a lighter color than a body paragraph at 16px, giving you more design flexibility at the top of the typographic hierarchy.

Color contrast beyond text

WCAG 2.1 also defines contrast requirements for non-text elements under Success Criterion 1.4.11 (Non-text Contrast): UI components (buttons, form inputs, focus indicators) and meaningful graphical elements (charts, icons, diagrams) require a 3:1 ratio against adjacent colors. This is frequently overlooked in design systems. Common failures include: light grey placeholder text in inputs, low-contrast focus outlines, and icon-only buttons where the icon color has insufficient contrast against the background. The WCAG checker in this tool focuses on text contrast — use the live preview section to visually verify non-text elements.

Limitations of the contrast ratio model

The WCAG 2.1 contrast formula is based on relative luminance and has known limitations for certain color combinations. It can report a passing ratio for near-black colors that appear very similar to each other visually, and it does not account for hue — some color-blind users may struggle with red/green combinations even when the luminance contrast passes. WCAG 3.0 (in development) proposes the APCA (Advanced Perceptual Contrast Algorithm) as a more accurate model. For critical accessibility use cases, always supplement automated contrast checking with user testing across diverse visual profiles and devices.

uicorn — free tools for designers and art directors

Frequently asked questions

What contrast ratio do I need for normal body text?

WCAG 2.1 Level AA requires a minimum contrast ratio of 4.5:1 for normal body text (below 18pt regular or 14pt bold). Level AAA requires 7:1 for the same text size.

Does contrast ratio apply to placeholder text in forms?

Yes. Placeholder text in form inputs is considered text under WCAG and must meet the same 4.5:1 ratio. This is one of the most commonly failed criteria — many design systems use near-white grey placeholders that fail AA.

My colors pass 4.5:1 but still look hard to read. Why?

The WCAG luminance formula does not account for hue. Red on green can pass 4.5:1 by luminance while being completely illegible to users with red-green color blindness. Contrast ratio is a necessary but not sufficient condition for accessibility — always test with users and with color blindness simulators.

Does the contrast requirement apply to icons?

Yes, under WCAG 2.1 Success Criterion 1.4.11 (Non-text Contrast). Informational icons and graphical elements must achieve 3:1 contrast against adjacent colors. Icons used purely as decoration (where text labels convey the same meaning) are exempt.

What is the contrast ratio of black on white?

Pure black (#000000) on pure white (#FFFFFF) has a contrast ratio of 21:1 — the maximum possible. Most readable body text in professional typography uses slightly softened values (dark grey on off-white) to reduce eye strain while still comfortably exceeding AA requirements.

Is WCAG 2.1 AA required by law?

In the EU, the Web Accessibility Directive (EU 2016/2102) requires public-sector websites and apps to meet WCAG 2.1 AA. In the US, Section 508 and ADA Title III case law reference WCAG 2.0 AA, with courts increasingly expecting 2.1. Many commercial organizations adopt AA as standard practice to reduce legal risk and serve a broader audience.

uicorn is and will always be free. Built by one person. Fuelled by coffee. Buy Lui a coffee

Related tools

Disclaimer — Tool 04 · WCAG Contrast Checker

WCAG 2.1 Model

The WCAG 2.1 relative luminance formula is the current accessibility standard for web content. It has known limitations for certain color combinations, particularly near-black and saturated colors. Passing the ratio does not guarantee perceived accessibility in all contexts.

Context Matters

Contrast ratio is one factor in readability. Font choice, weight, size, line length, and the user's display calibration all affect legibility. Always test with real users and on real devices, particularly for critical content.

Liability

All outputs are provided without warranty of any kind, express or implied. uicorn and its operator accept no liability for any direct, indirect, or consequential loss or damage arising from the use of, or reliance on, this tool or its output. You are solely responsible for verifying all values before use in any professional, commercial, or production context.