Color Contrast Checker
Enter foreground and background colors to calculate the contrast ratio and check compliance against WCAG AA and AAA accessibility standards.
Aa
Large text sample (18pt+)
Normal text sample — the quick brown fox jumps over the lazy dog. Pack my box with five dozen liquor jugs.
| Level | Use Case | Required | Result |
|---|---|---|---|
| AA | Normal text | 4.5:1 | ✓ Pass |
| AA | Large text | 3.0:1 | ✓ Pass |
| AA | UI elements | 3.0:1 | ✓ Pass |
| AAA | Normal text | 7.0:1 | ✓ Pass |
| AAA | Large text | 4.5:1 | ✓ Pass |
Presets
Related tools
About Color Contrast and Accessibility
Color contrast refers to the difference in perceived luminance between two colors — typically the text color and the background it sits on. Sufficient contrast is essential for readability, particularly for users with low vision, color blindness, or who are viewing content in bright ambient light.
How contrast ratio is calculated
The WCAG contrast ratio formula uses the relative luminance of each color. Luminance is calculated by linearizing each RGB channel (accounting for the sRGB gamma curve) and weighting them by how the human eye perceives brightness — green contributes the most (71.5%), red second (21.3%), and blue the least (7.2%). The contrast ratio is then:
ratio = (L1 + 0.05) / (L2 + 0.05)
Where L1 is the relative luminance of the lighter color and L2 is the relative luminance of the darker color. The ratio ranges from 1:1 (no contrast — identical colors) to 21:1 (maximum contrast — pure black on pure white).
WCAG 2.1 contrast requirements
| Level | Text size | Minimum ratio |
|---|---|---|
| AA | Normal text (<18pt / <14pt bold) | 4.5:1 |
| AA | Large text (≥18pt or ≥14pt bold) | 3.0:1 |
| AA | UI components & graphical objects | 3.0:1 |
| AAA | Normal text | 7.0:1 |
| AAA | Large text | 4.5:1 |
AA vs. AAA compliance
WCAG Level AA is the legal and practical standard that most organizations target — it is the basis for accessibility laws in the US (Section 508), EU (EN 301 549), and UK (PSBAR). AA compliance ensures readability for the vast majority of users with visual impairments.
Level AAA is a higher standard that provides enhanced accessibility. It is recommended for critical interfaces, government services, and any product where the widest possible audience must be supported. Not all content can meet AAA for all text sizes, but targeting it where possible improves the experience for users with severe low vision.
What counts as large text?
WCAG defines large text as at least 18pt (24px) in regular weight, or at least 14pt (approximately 18.67px) in bold. Large text has a lower contrast requirement (3:1 instead of 4.5:1) because larger letterforms are easier to distinguish even at lower contrast.
Privacy
All contrast calculations run entirely in your browser. No color values are sent to any server. Learn more about how Dev-Utilities handles privacy.