CSS Color Contrast Checker
Paste CSS and check every text/background colour pair against WCAG at once.
6Colour pairs
3Pass AA
3Fail AA
2Pass AAA
| Selector | Text | Background | Preview | Ratio | AA | AAA | Fix |
|---|---|---|---|---|---|---|---|
| body | #2a2018 | #fffaf1 | Aa | 15.32 | Pass | Pass | — |
| .btn-primary | #ffffff | #c2532b | Aa | 4.60 | Pass | Fail | — |
| .hint | #9a9a9a | #ffffff (default) | Aa | 2.81 | Fail | Fail | #767676 |
| .badge | #fff | #f4b400 | Aa | 1.85 | Fail | Fail | #4e4e4e |
| .link:hover | #3b82f6 | #ffffff (default) | Aa | 3.68 | Fail | Fail | #1e6ff5 |
| .footer | rgba(255, 255, 255, 0.6) | #1b1713 | Aa | 7.02 | Pass | Pass | — |
Rules are checked on their own: text inheriting a background from a parent element uses the default background above.