Please select a foreground color and a background color. You can enter hex color codes or use the color selector tool. The “WCAG Compliance Information” chart will tell you if the selected colors pass conformance.
| ELEMENT TYPE | AA | AAA |
|---|---|---|
| Small Text | Pass | Pass |
| Large Text | Pass | Pass |
| UI Components | Pass | - |
This contrast checker attempts to calculate contrast ratios as accurately as possible. There may be situations where a color combination meets the calculated ratio; but the element being checked still fails overall. This may be due to other visually related factors (ex. hover/focus states and effects, etc).
Level AA – Text
4.5:1 for regular text and 3:1 for large text (18 pt or 14 pt + bold).
WCAG Success Criterion 1.4.3
Level AA – Non-Text
3:1 for UI components & graphics.
WCAG Success Criterion 1.4.11
Level AAA – Text
7:1 for regular text and 4.5:1 for large text (18 pt or 14 pt + bold).
WCAG Success Criterion 1.4.6
Explore accessibility resources and tools to check accessibility compliance and remediate it.
Scan websites to discover accessibility issues.
Show the world that you’re dedicated to making your website accessible.
Ask our experts any accessibility question and browse through answered topics.