WCAG Contrast Checker
Single-criterion color contrast against WCAG 2.1 success criteria 1.4.3 (AA) and 1.4.6 (AAA). Not a substitute for a full accessibility audit.
Sample text
The quick brown fox jumps
Body copy at 16px shows what contrast feels like for paragraph reading.
Contrast ratio
14.03 : 1
Highest level passed: AAA
AA · normal text
Pass · ≥ 4.5
AA · large text
Pass · ≥ 3.0
AAA · normal text
Pass · ≥ 7.0
AAA · large text
Pass · ≥ 4.5
Single-criterion only. WCAG 2.1 has many other criteria — keyboard navigation, semantic HTML, focus state, motion preferences. Passing contrast does not mean passing accessibility. Use a full audit tool plus manual testing with assistive technologies.
About WCAG Contrast Checker
Test foreground/background colour pairs against WCAG 2.1 success criteria 1.4.3 (AA) and 1.4.6 (AAA). Shows the contrast ratio, pass/fail for normal and large text at both levels, and a live preview of the colour combination. Clearly labelled as a single-criterion checker — not a full accessibility audit.
Pipeline
- Color Converter — convert colours to a consistent format before testing contrast.
- Color Palette Extractor — extract brand colours from an image, then test each pair here.
Frequently asked
- What is WCAG contrast ratio?
- The contrast ratio is a number from 1:1 (no contrast, same colour) to 21:1 (maximum contrast, black on white). It is calculated from the relative luminance of the two colours using the formula (L1 + 0.05) / (L2 + 0.05) where L1 is the lighter colour. WCAG 2.1 defines minimum ratios for text readability.
- What is the difference between AA and AAA?
- WCAG 2.1 success criterion 1.4.3 (AA) requires a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text (18pt or 14pt bold). Criterion 1.4.6 (AAA) requires 7:1 for normal text and 4.5:1 for large text. AA is the legal minimum in most jurisdictions; AAA is the enhanced target.
- What counts as "large text"?
- WCAG defines large text as at least 18pt (24px) regular weight, or at least 14pt (approximately 18.67px) bold. The lower contrast threshold for large text reflects that larger characters are easier to read at lower contrast.
- Does passing contrast mean my site is accessible?
- No. Colour contrast is one of many accessibility requirements. WCAG 2.1 has 78 success criteria covering keyboard navigation, screen reader compatibility, focus management, motion, and more. This tool checks a single criterion (1.4.3 / 1.4.6) and is not a substitute for a full accessibility audit.
- What colour formats does this tool accept?
- Hex (#rgb, #rrggbb, #rrggbbaa), rgb(), rgba(), and common named colours (black, white, red, etc.). Alpha values in rgba() and 8-digit hex are accepted but ignored — contrast is calculated on the opaque colour values only.