Color Contrast Examples
Below are common color pairings with their contrast ratio, calculated using the same WCAG formula as the Color Contrast Check tool. Pass/fail is shown against the normal text thresholds (4.5:1 for AA, 7:1 for AAA); large text and UI components have lower requirements, explained in the WCAG Contrast Guide. Click "Try it" on any row to open that exact pair in the tool.
| Colors | Ratio | AA | AAA | Notes |
|---|---|---|---|---|
| Aa Try it → #000000 on #ffffff | 21.00:1 | Pass | Pass | Maximum possible contrast. Always safe. |
| Aa Try it → #ffffff on #000000 | 21.00:1 | Pass | Pass | Same pairing inverted. Common on dark UI. |
| Aa Try it → #767676 on #ffffff | 4.54:1 | Pass | Fail | The lightest gray that still passes AA on white. |
| Aa Try it → #999999 on #ffffff | 2.85:1 | Fail | Fail | Fails AA. A common mistake for secondary text. |
| Aa Try it → #cccccc on #ffffff | 1.61:1 | Fail | Fail | Fails badly. Often used for placeholders without checking. |
| Aa Try it → #0000ee on #ffffff | 9.40:1 | Pass | Pass | The classic browser default link blue. |
| Aa Try it → #1a73e8 on #ffffff | 4.51:1 | Pass | Fail | A popular brand blue. Passes AA by a hair. |
| Aa Try it → #ffff00 on #ffffff | 1.07:1 | Fail | Fail | Nearly invisible. A textbook bad pairing. |
| Aa Try it → #ffffff on #121212 | 18.73:1 | Pass | Pass | A typical dark-mode text and background pairing. |
| Aa Try it → #e0e0e0 on #121212 | 14.19:1 | Pass | Pass | Softer dark-mode text. Still comfortably passes. |
| Aa Try it → #ffffff on #f2c94c | 1.59:1 | Fail | Fail | Fails. A frequent issue on colorful CTA buttons. |
| Aa Try it → #212529 on #f8f9fa | 14.63:1 | Pass | Pass | A common "off-black on off-white" UI pairing. |
| Aa Try it → #2e7d32 on #ffffff | 5.13:1 | Pass | Fail | A usable "success" green. |
| Aa Try it → #d32f2f on #ffffff | 4.98:1 | Pass | Fail | A usable "error" red. Brighter reds often fail. |
| Aa Try it → #ffcc00 on #000000 | 13.89:1 | Pass | Pass | A strong, high-contrast warning pairing. |
Want the full breakdown of what these ratios mean? Read the WCAG Contrast Guide. Or open the tool to test your own colors.
This page evaluates color contrast only and doesn't guarantee WCAG, ADA, or other legal or regulatory compliance.