A11y Color Contrast Checker
Color contrast is an essential aspect of accessibility in your application. Selecting a foreground and background color with a large enough contrast will ensure that your web application is legible to all users. The sooner you understand color contrast specifications the better decisions you will make, not only in terms of your web applications, but also your branding as a whole.
Ratio
0:1WCAG defines two ratings for color contrast: AA rating (the minimum ratio required for a passing contrast) and AAA rating (the enhanced ratio and best accessibility rating). There are also 3 types of content (body text, large-scale text, and graphical objecs & user interface components) which WCAG guidelines have defined ratios for. Ideally, we should always aim to have at least a AA rating in all three content types. It's also important to note that there is no AAA rating for the last content type (graphical objecs & active user interface components).
| Type of content | Minimum ratio (AA rating) | Enhanced ratio (AAA rating) |
|---|---|---|
| Body text | 4.5 : 1 | 7 : 1 |
| Large-scale text | 3 : 1 | 4.5 : 1 |
| Active user interface components & graphical objects | 3 : 1 |
Body text
The quick brown fox jumped over the...
Large-scale text
The quick brown fox jumped over the...