Check color contrast by WCAG standard
Page title
Normal text. Check text readability on the selected background. Sufficient contrast between text and background is important for accessibility.
Small text (14px). Contrast requirements are stricter for smaller fonts.
Large text (18px bold). Less contrast is acceptable for large text.
Very small text (12px). This size requires maximum contrast for comfortable reading.
WCAG — Web Content Accessibility Guidelines, web content accessibility standard.
Level AA — minimum recommended contrast level. Normal text >= 4.5:1, large text >= 3:1.
Level AAA — enhanced level. Normal text >= 7:1, large text >= 4.5:1.
Large text — text 18px+ normal or 14px+ bold.
Formula — Relative luminance L = 0.2126*R + 0.7152*G + 0.0722*B (after sRGB linearization). Contrast = (L1 + 0.05) / (L2 + 0.05), where L1 is the greater luminance.
WCAG Contrast Checker — Color Accessibility Online
This tool calculates the contrast ratio between two colors according to WCAG 2.1 and automatically suggests adjusted variants to meet AA and AAA levels. Essential for developers and designers who care about accessibility.
What Is WCAG
WCAG (Web Content Accessibility Guidelines) is an international web accessibility standard by W3C. Version 2.1 (2018) defines criteria for people with visual, auditory, and cognitive disabilities. Text contrast is a key criterion (Success Criterion 1.4.3).
Contrast Levels
| Level | Normal text | Large text (18pt+ or 14pt bold) |
|---|---|---|
| AA | 4.5 : 1 | 3 : 1 |
| AAA | 7 : 1 | 4.5 : 1 |
Reference: black on white = 21:1 (maximum). Gray #767676 on white = exactly 4.5:1 (AA). Light gray #aaa on white = 2.32:1 (fails).
Calculation Formula
Contrast = (L1 + 0.05) / (L2 + 0.05), where L1 is the relative luminance of the lighter color, L2 of the darker. Relative luminance is computed from sRGB components with gamma correction.
Accessible Color Suggestions
Our tool automatically finds the nearest color variants meeting AA and AAA. The algorithm uses binary search on HSL lightness until the required ratio is reached, preserving the original hue and saturation.
Frequently Asked Questions
Does WCAG apply to icons without text?
Yes, informational icons (not decorative) require AA (3:1).
Is WCAG compliance mandatory?
For government sites in most countries — yes. For commercial sites — recommended to improve UX and reduce legal risk.
Does font size affect requirements?
Yes. Large text (18px normal or 14px bold) requires less contrast: AA = 3:1 instead of 4.5:1.
For color selection use Color Picker, for gradients — CSS Gradient.