Color Contrast Checker — WCAG AA & AAA

What is contrast ratio and why does it matter?

Contrast ratio is a number that describes how different two colours appear to the human eye — specifically, how much the foreground colour (text) stands out from the background. The scale runs from 1:1 (identical colours, invisible text) to 21:1 (pure black on pure white, maximum contrast).

Approximately 8% of men and 0.5% of women have some form of colour vision deficiency. A further significant portion of the population has reduced contrast sensitivity due to age, screen glare, or viewing in bright sunlight. Designing for adequate contrast is not just a legal checkbox — it directly determines whether a large fraction of your users can actually read your content.

The Web Content Accessibility Guidelines (WCAG) codify minimum contrast requirements into two testable thresholds: Level AA (the widely-adopted standard) and Level AAA (enhanced, for maximum accessibility).

WCAG AA and AAA thresholds explained

WCAG 2.1 Success Criterion 1.4.3 (Level AA) and 1.4.6 (Level AAA) define the following contrast minimums:

Text type	WCAG AA minimum	WCAG AAA minimum
Normal text (under 18pt / 14pt bold)	4.5:1	7:1
Large text (18pt+ / 14pt+ bold)	3:1	4.5:1
UI components and graphical objects	3:1 (SC 1.4.11)	Not specified

Note that these thresholds apply to text that conveys information. Decorative text, logotypes, text in inactive UI components, and text that is part of a photograph are explicitly exempt from the contrast requirement.

What counts as "large text"?

WCAG defines large text in points, not pixels, because points are a physical measurement independent of screen resolution. The browser defaults at 96 DPI give these pixel equivalents:

18pt regular = 24px at standard screen DPI. A heading set in CSS at font-size: 24px; font-weight: 400 is large text.
14pt bold = 18.67px bold. A label at font-size: 18px; font-weight: 700 qualifies as large text.

Everything below these sizes — your body copy, captions, navigation links, button labels, form inputs — falls into the normal text category and requires the stricter 4.5:1 ratio.

How the contrast ratio is calculated

The WCAG contrast ratio formula has two steps:

Step 1 — Relative luminance. Each RGB channel value (0–255) is divided by 255, then gamma-corrected using the sRGB transfer function:

if channel ≤ 0.03928:
  linear = channel / 12.92
else:
  linear = ((channel + 0.055) / 1.055) ^ 2.4

luminance = 0.2126 × R_linear + 0.7152 × G_linear + 0.0722 × B_linear

Step 2 — Contrast ratio. Given luminance values L1 (lighter) and L2 (darker):

contrast_ratio = (L1 + 0.05) / (L2 + 0.05)

The 0.05 offset prevents division by zero and models the fact that real displays emit some light even when showing "black." Pure white has a luminance of 1.0; pure black has 0.0. Their contrast ratio is (1.05 / 0.05) = 21:1.

Legal and compliance requirements

WCAG 2.1 Level AA is referenced by legislation in most major jurisdictions:

United States: Section 508 of the Rehabilitation Act mandates WCAG 2.0 AA for federal agencies and their contractors. The ADA is broadly interpreted to apply to commercial websites.
European Union: EN 301 549 (which incorporates WCAG 2.1 AA) is mandatory for public sector websites under the Web Accessibility Directive. The European Accessibility Act extends this to private sector products and services by 2025.
Canada: The Accessible Canada Act and provincial legislation (AODA in Ontario) require WCAG 2.0 AA compliance.
United Kingdom: The Public Sector Bodies Accessibility Regulations 2018 require WCAG 2.1 AA for public sector websites.

For private-sector websites outside the public sector, legal risk from ADA litigation in the US has increased significantly since 2017. Contrast is one of the most commonly cited failures in accessibility lawsuits because it is objectively testable.

How to fix failing contrast

When your colours fail WCAG AA, here are the most practical fixes:

Darken the text colour. On light backgrounds, moving from a medium gray (#9ca3af, ratio 2.5:1) to a dark gray (#374151, ratio 10.5:1) is usually the simplest fix and maintains the visual hierarchy.
Lighten the background. If you must keep a specific text colour, making the background lighter increases the contrast ratio. Even a slight shift (e.g., #e5e7eb → #f9fafb) can tip a borderline pass.
Use the large text exemption strategically. Reserve low-contrast brand colours for headings at 24px+, where the 3:1 threshold applies. Use a high-contrast neutral for body text.
Generate accessible colour scales. Tools like Radix Colours and Adobe Leonardo generate colour scales calibrated to pass AA at every step, built from your brand hue.
Test in context. Contrast ratio is a mathematical minimum, not a guarantee of readability. Test with real users, especially older adults and users with low-vision conditions.

Frequently Asked Questions

What contrast ratio do I need to pass WCAG AA?

For WCAG 2.1 Level AA, normal text (under 18pt regular or 14pt bold) requires a minimum contrast ratio of 4.5:1 against its background. Large text — defined as 18pt (24px) regular or 14pt (18.67px) bold — only requires 3:1. These thresholds apply to text on a background, not to decorative images or inactive UI components.

What is the difference between WCAG AA and WCAG AAA?

WCAG 2.1 has three conformance levels: A (minimum), AA (standard), and AAA (enhanced). AA is the target for most public websites and is required by legislation in many countries (EN 301 549 in the EU, Section 508 in the US). AAA requires 7:1 contrast for normal text and 4.5:1 for large text — significantly higher and not always achievable for every design. WCAG 3.0 is in development and will replace the current contrast model with APCA (Advanced Perceptual Contrast Algorithm).

Why is the contrast ratio formula complicated — what is relative luminance?

Human vision is not linear — we are more sensitive to changes in dark tones than light tones. The WCAG contrast formula compensates for this by first converting each sRGB colour channel to a linearised value, weighting the three channels by their contribution to perceived brightness (R: 21.26%, G: 71.52%, B: 7.22%), then computing the ratio. This is called relative luminance. The contrast ratio between two colours is (L1 + 0.05) / (L2 + 0.05), where L1 is the lighter luminance and L2 the darker.

Does this tool work with colours other than hex — like rgb() or hsl()?

This tool accepts hex colours (#RRGGBB or #RGB shorthand). To convert from rgb() or hsl(), use a colour picker in your browser's DevTools — it shows all three formats simultaneously. Alternatively, CSS has native conversions: rgb(30, 41, 59) is hex #1e293b, and hsl() values map directly through the HSL-to-RGB formula.

My brand colours fail AA. What should I do?

The easiest fix is to use the brand colour for large headings (which only need 3:1) and switch to a darker or lighter variant for body text. Many design systems define a secondary text colour at a higher contrast that still feels on-brand. You can also increase font size — text at 24px or bold 18.67px falls into the 'large text' category with the lower 3:1 threshold. Tools like Leonardo (by Adobe) can generate accessible colour scales from a brand hue automatically.