WCAG AA Contrast Checker
WCAG AA-specific contrast checker that returns a fast pass or fail verdict against the 4.5:1 normal text and 3:1 large text thresholds. Designed for compliance reviews where AA is the legal baseline and AAA would slow the audit.
Continue Your Colors Journey
What is WCAG AA Contrast Checker?
The WCAG AA Checker tests a foreground and background color pair against the Web Content Accessibility Guidelines (WCAG) 2.1 AA conformance level. It computes relative luminance to measure the color contrast ratio as a numeric value plus pass or fail against the AA thresholds of 4.5:1 for normal text and 3:1 for large text. Use it before publishing any user-facing design where readability matters.
How does WCAG AA Contrast Checker work?
Relative luminance L is computed from each color's sRGB components using the WCAG 2.1 formula: each 8-bit channel is normalized to 0-1, gamma-decoded with the piecewise sRGB transfer, and weighted by the luminance coefficients 0.2126 (R), 0.7152 (G), 0.0722 (B). The contrast ratio is then (L1 + 0.05) / (L2 + 0.05) where L1 is the lighter of the two. The result is compared to the AA thresholds (4.5:1 for body text, 3:1 for large text) which were derived from empirical readability studies on low-vision users.
Key Features
- Tests a foreground and background color pair against WCAG 2.1 AA thresholds
- Reports the numeric contrast ratio (for example, 4.54:1) with two decimal precision
- Returns pass or fail for normal text at the 4.5:1 threshold
- Returns pass or fail for large text at the 3:1 threshold
- Color picker inputs plus direct hex entry for both foreground and background
- Side-by-side text-on-background preview with adjustable sample text and font size
- Shows the underlying relative luminance of each color so auditors can document the calculation
Common Use Cases
Verifying body copy before publishing
Test every paragraph text and background color pair in a marketing page against AA before launch.
Auditing form controls
Check that input labels, placeholder text and helper text all clear AA against their form field background.
Validating button states
Test default, hover and disabled button text against the button background and verify AA still holds across states.
Reviewing icon-only controls
Confirm icon color against background clears the 3:1 non-text threshold for graphical objects per WCAG 1.4.11.
Comparing palette options
Pick candidate primary colors and test each against white, black and brand backgrounds to find the best accessibility fit.
How to Use This Tool
Choose the foreground color
Use the color picker or type a hex value for the text or icon color.
Choose the background color
Pick or enter the hex code for the surface behind the text.
Read the contrast ratio and AA result
The tool shows the ratio, the AA pass or fail verdict for normal text, and the AA verdict for large text.
Toggle large-text mode
Switch into large-text evaluation (14pt bold or 18pt regular) to apply the 3:1 threshold instead of 4.5:1.
Iterate until both pass
Adjust either color until the pair passes AA for the use case (body copy, heading, button label).
Pro Tips
- 1
WCAG AA requires 4.5:1 for normal text and 3:1 for large text (18pt regular or 14pt bold and above).
- 2
Black on white is 21:1 (the maximum). Mid-greys on white and white on mid-greys are where AA failures cluster.
- 3
If the foreground and background are very close in luminance, focus on changing one of them rather than splitting the difference, since the contrast ratio flattens around mid-luminance.
- 4
AA does not guarantee readability for all users. Run AAA at 7:1 for body copy and 4.5:1 for large text if you have control over both colors.
- 5
Run the checker for placeholder text too. Light grey on white commonly fails AA even when the regular text variant passes.
Frequently Asked Questions
What threshold does the WCAG AA checker use for body text?
WCAG AA requires a 4.5:1 contrast ratio between the foreground text and the background. Anything below that fails AA for normal-size body copy.
When does WCAG AA allow a 3:1 ratio instead of 4.5:1?
The 3:1 threshold applies to large text, defined by WCAG as 18 point or 14 point bold and larger, and to graphical objects and UI components under Success Criterion 1.4.11.
Is passing WCAG AA enough for colorblind users?
AA addresses low-vision contrast, not color discrimination. A pair can pass AA while still being hard to distinguish for users with red-green or blue-yellow color vision deficiency. Use a separate colorblindness simulator for that case.
How does this AA-only checker differ from a full WCAG contrast checker?
A full WCAG checker tests both AA and AAA. This AA-only tool focuses on the AA thresholds (4.5:1 and 3:1), which are the legal baseline in most jurisdictions, so it produces a faster yes/no answer for compliance reviews.
What does the numeric contrast ratio mean?
It is the ratio (L1 + 0.05) / (L2 + 0.05), where L1 and L2 are the relative luminance of the lighter and darker color, both on a 0 to 1 scale. A ratio of 4.5 means the lighter color is 4.5 times brighter than the darker.
What counts as large text under WCAG AA?
WCAG defines large text as 18 point or larger, or 14 point or larger when bold. Anything smaller must meet the 4.5:1 normal-text threshold, even if the visual size feels large on a high-DPI screen.