Color Contrast
Color contrast ratios, checked against WCAG
Exact WCAG 2.1 AA and AAA results for popular color pairs — brand colors, Tailwind and Material palettes, and the common grays designers ask about. Need a pair that isn't here? Check any two colors in the contrast checker.
Text on White #ffffff
- Black 21.00:1 AA✓
- Navy 16.01:1 AA✓
- Gray 333333 12.63:1 AA✓
- Maroon 10.95:1 AA✓
- Purple 9.42:1 AA✓
- Dark Slate Gray 8.93:1 AA✓
- Tailwind Slate 600 7.58:1 AA✓
- Material Deep Purple 7.33:1 AA✓
- Gray 595959 7.00:1 AA✓
- Material Indigo 6.87:1 AA✓
- Material Brown 6.55:1 AA✓
- Tailwind Red 700 6.47:1 AA✓
- Material Purple 6.30:1 AA✓
- Link Blue 5.86:1 AA✓
- Gray 666666 5.74:1 AA✓
- LinkedIn Blue 5.69:1 AA✓
- Dim Gray 5.49:1 AA✓
- Tailwind Blue 600 5.17:1 AA✓
- Green 5.14:1 AA✓
- Crimson 4.99:1 AA✓
- Teal 4.77:1 AA✓
- Tailwind Slate 500 4.76:1 AA✓
- Gray 767676 4.54:1 AA✓
- Google Blue 4.51:1 AA✓
- Bootstrap Blue 4.50:1 AA✓
- #777777 4.48:1 AA✗
- Tailwind Indigo 500 4.47:1 AA✗
- Forest Green 4.39:1 AA✗
- Material Blue Gray 4.37:1 AA✗
- Material Pink 4.35:1 AA✗
- Facebook Blue 4.23:1 AA✗
- Tailwind Violet 500 4.23:1 AA✗
- Steel Blue 4.11:1 AA✗
- Slate Gray 4.05:1 AA✗
- Pure Red 4.00:1 AA✗
- Tailwind Purple 500 3.96:1 AA✗
- Tailwind Red 500 3.76:1 AA✗
- Tailwind Blue 500 3.68:1 AA✗
- Material Red 3.68:1 AA✗
- Material Teal 3.67:1 AA✗
- Gray 888888 3.54:1 AA✗
- Tailwind Pink 500 3.53:1 AA✗
- Tailwind Green 600 3.30:1 AA✗
- Material Blue 3.12:1 AA✗
- Tomato 2.95:1 AA✗
- Gray 999999 2.85:1 AA✗
- Twitter Blue 2.83:1 AA✗
- Tailwind Orange 500 2.80:1 AA✗
- Material Green 2.78:1 AA✗
- Material Light Blue 2.63:1 AA✗
- Tailwind Emerald 500 2.54:1 AA✗
- Tailwind Teal 500 2.49:1 AA✗
- Tailwind Cyan 500 2.43:1 AA✗
- Gray aaaaaa 2.32:1 AA✗
- Material Cyan 2.30:1 AA✗
- Tailwind Green 500 2.28:1 AA✗
- Goldenrod 2.24:1 AA✗
- Material Orange 2.16:1 AA✗
- Tailwind Amber 500 2.15:1 AA✗
- Tailwind Yellow 500 1.92:1 AA✗
- Gray cccccc 1.61:1 AA✗
Text on Black #000000
- White 21.00:1 AA✓
- Gray cccccc 13.08:1 AA✓
- Tailwind Yellow 500 10.95:1 AA✓
- Tailwind Amber 500 9.78:1 AA✓
- Material Orange 9.74:1 AA✓
- Goldenrod 9.38:1 AA✓
- Tailwind Green 500 9.22:1 AA✓
- Material Cyan 9.14:1 AA✓
- Gray aaaaaa 9.04:1 AA✓
- Tailwind Cyan 500 8.65:1 AA✓
- Tailwind Teal 500 8.44:1 AA✓
- Tailwind Emerald 500 8.28:1 AA✓
- Material Light Blue 7.99:1 AA✓
- Material Green 7.56:1 AA✓
- Tailwind Orange 500 7.49:1 AA✓
- Twitter Blue 7.43:1 AA✓
- Gray 999999 7.37:1 AA✓
- Tomato 7.13:1 AA✓
- Material Blue 6.72:1 AA✓
- Tailwind Green 600 6.37:1 AA✓
- Tailwind Pink 500 5.95:1 AA✓
- Gray 888888 5.92:1 AA✓
- Material Teal 5.72:1 AA✓
- Tailwind Blue 500 5.71:1 AA✓
- Material Red 5.70:1 AA✓
- Tailwind Red 500 5.58:1 AA✓
- Tailwind Purple 500 5.31:1 AA✓
- Pure Red 5.25:1 AA✓
- Slate Gray 5.18:1 AA✓
- Steel Blue 5.11:1 AA✓
- Facebook Blue 4.96:1 AA✓
- Tailwind Violet 500 4.96:1 AA✓
- Material Pink 4.83:1 AA✓
- Material Blue Gray 4.80:1 AA✓
- Forest Green 4.78:1 AA✓
- Tailwind Indigo 500 4.70:1 AA✓
- Bootstrap Blue 4.67:1 AA✓
- Google Blue 4.66:1 AA✓
- Gray 767676 4.62:1 AA✓
- Tailwind Slate 500 4.41:1 AA✗
- Teal 4.40:1 AA✗
- Crimson 4.21:1 AA✗
- Green 4.09:1 AA✗
- Tailwind Blue 600 4.06:1 AA✗
- Dim Gray 3.83:1 AA✗
- LinkedIn Blue 3.69:1 AA✗
- Gray 666666 3.66:1 AA✗
- Link Blue 3.59:1 AA✗
- Material Purple 3.33:1 AA✗
- Tailwind Red 700 3.25:1 AA✗
- Material Brown 3.21:1 AA✗
- Material Indigo 3.06:1 AA✗
- Gray 595959 3.00:1 AA✗
- Material Deep Purple 2.87:1 AA✗
- Tailwind Slate 600 2.77:1 AA✗
- Dark Slate Gray 2.35:1 AA✗
- Purple 2.23:1 AA✗
- Maroon 1.92:1 AA✗
- Gray 333333 1.66:1 AA✗
- Navy 1.31:1 AA✗
Text on Light Gray #f5f5f5
- Navy 14.68:1 AA✓
- Gray 333333 11.59:1 AA✓
- Maroon 10.04:1 AA✓
- Purple 8.64:1 AA✓
- Dark Slate Gray 8.19:1 AA✓
- Tailwind Slate 600 6.95:1 AA✓
- Material Deep Purple 6.72:1 AA✓
- Gray 595959 6.42:1 AA✓
- Material Indigo 6.30:1 AA✓
- Material Brown 6.01:1 AA✓
- Tailwind Red 700 5.93:1 AA✓
- Material Purple 5.78:1 AA✓
- Link Blue 5.37:1 AA✓
- Gray 666666 5.27:1 AA✓
- LinkedIn Blue 5.22:1 AA✓
- Dim Gray 5.04:1 AA✓
- Tailwind Blue 600 4.74:1 AA✓
- Green 4.71:1 AA✓
- Crimson 4.58:1 AA✓
- Teal 4.38:1 AA✗
- Tailwind Slate 500 4.36:1 AA✗
- Gray 767676 4.17:1 AA✗
- Google Blue 4.13:1 AA✗
- Bootstrap Blue 4.13:1 AA✗
- Tailwind Indigo 500 4.10:1 AA✗
- Forest Green 4.03:1 AA✗
- Material Blue Gray 4.01:1 AA✗
- Material Pink 3.99:1 AA✗
- Facebook Blue 3.88:1 AA✗
- Tailwind Violet 500 3.88:1 AA✗
- Steel Blue 3.77:1 AA✗
- Slate Gray 3.72:1 AA✗
- Pure Red 3.67:1 AA✗
- Tailwind Purple 500 3.63:1 AA✗
- Tailwind Red 500 3.45:1 AA✗
- Material Red 3.38:1 AA✗
- Tailwind Blue 500 3.37:1 AA✗
- Material Teal 3.37:1 AA✗
- Gray 888888 3.25:1 AA✗
- Tailwind Pink 500 3.24:1 AA✗
- Tailwind Green 600 3.02:1 AA✗
- Material Blue 2.87:1 AA✗
- Tomato 2.70:1 AA✗
- Gray 999999 2.61:1 AA✗
- Twitter Blue 2.59:1 AA✗
- Tailwind Orange 500 2.57:1 AA✗
- Material Green 2.55:1 AA✗
- Material Light Blue 2.41:1 AA✗
- Tailwind Emerald 500 2.33:1 AA✗
- Tailwind Teal 500 2.28:1 AA✗
- Tailwind Cyan 500 2.23:1 AA✗
- Gray aaaaaa 2.13:1 AA✗
- Material Cyan 2.11:1 AA✗
- Tailwind Green 500 2.09:1 AA✗
- Goldenrod 2.05:1 AA✗
- Material Orange 1.98:1 AA✗
- Tailwind Amber 500 1.97:1 AA✗
- Tailwind Yellow 500 1.76:1 AA✗
- Gray cccccc 1.47:1 AA✗
Text on Warm Paper #faf7f1
- Navy 14.97:1 AA✓
- Gray 333333 11.82:1 AA✓
- Maroon 10.24:1 AA✓
- Purple 8.81:1 AA✓
- Dark Slate Gray 8.35:1 AA✓
- Tailwind Slate 600 7.09:1 AA✓
- Material Deep Purple 6.85:1 AA✓
- Gray 595959 6.55:1 AA✓
- Material Indigo 6.43:1 AA✓
- Material Brown 6.13:1 AA✓
- Tailwind Red 700 6.05:1 AA✓
- Material Purple 5.90:1 AA✓
- Link Blue 5.48:1 AA✓
- Gray 666666 5.37:1 AA✓
- LinkedIn Blue 5.32:1 AA✓
- Dim Gray 5.13:1 AA✓
- Tailwind Blue 600 4.83:1 AA✓
- Green 4.80:1 AA✓
- Crimson 4.67:1 AA✓
- Teal 4.46:1 AA✗
- Tailwind Slate 500 4.45:1 AA✗
- Gray 767676 4.25:1 AA✗
- Google Blue 4.21:1 AA✗
- Bootstrap Blue 4.21:1 AA✗
- Tailwind Indigo 500 4.18:1 AA✗
- Forest Green 4.11:1 AA✗
- Material Blue Gray 4.09:1 AA✗
- Material Pink 4.07:1 AA✗
- Facebook Blue 3.96:1 AA✗
- Tailwind Violet 500 3.96:1 AA✗
- Steel Blue 3.84:1 AA✗
- Slate Gray 3.79:1 AA✗
- Pure Red 3.74:1 AA✗
- Tailwind Purple 500 3.70:1 AA✗
- Tailwind Red 500 3.52:1 AA✗
- Tailwind Blue 500 3.44:1 AA✗
- Material Red 3.44:1 AA✗
- Material Teal 3.43:1 AA✗
- Gray 888888 3.32:1 AA✗
- Tailwind Pink 500 3.30:1 AA✗
- Tailwind Green 600 3.08:1 AA✗
- Material Blue 2.92:1 AA✗
- Tomato 2.76:1 AA✗
- Gray 999999 2.66:1 AA✗
- Twitter Blue 2.64:1 AA✗
- Tailwind Orange 500 2.62:1 AA✗
- Material Green 2.60:1 AA✗
- Material Light Blue 2.46:1 AA✗
- Tailwind Emerald 500 2.37:1 AA✗
- Tailwind Teal 500 2.33:1 AA✗
- Tailwind Cyan 500 2.27:1 AA✗
- Gray aaaaaa 2.17:1 AA✗
- Material Cyan 2.15:1 AA✗
- Tailwind Green 500 2.13:1 AA✗
- Goldenrod 2.09:1 AA✗
- Material Orange 2.02:1 AA✗
- Tailwind Amber 500 2.01:1 AA✗
- Tailwind Yellow 500 1.79:1 AA✗
- Gray cccccc 1.50:1 AA✗
Text on Dark Slate #0f172a
- Gray cccccc 11.12:1 AA✓
- Tailwind Yellow 500 9.31:1 AA✓
- Tailwind Amber 500 8.31:1 AA✓
- Material Orange 8.28:1 AA✓
- Goldenrod 7.98:1 AA✓
- Tailwind Green 500 7.83:1 AA✓
- Material Cyan 7.77:1 AA✓
- Gray aaaaaa 7.68:1 AA✓
- Tailwind Cyan 500 7.35:1 AA✓
- Tailwind Teal 500 7.17:1 AA✓
- Tailwind Emerald 500 7.04:1 AA✓
- Material Light Blue 6.79:1 AA✓
- Material Green 6.42:1 AA✓
- Tailwind Orange 500 6.37:1 AA✓
- Twitter Blue 6.32:1 AA✓
- Gray 999999 6.27:1 AA✓
- Tomato 6.06:1 AA✓
- Material Blue 5.71:1 AA✓
- Tailwind Green 600 5.42:1 AA✓
- Tailwind Pink 500 5.06:1 AA✓
- Gray 888888 5.04:1 AA✓
- Material Teal 4.86:1 AA✓
- Tailwind Blue 500 4.85:1 AA✓
- Material Red 4.85:1 AA✓
- Tailwind Red 500 4.74:1 AA✓
- Tailwind Purple 500 4.51:1 AA✓
- Pure Red 4.46:1 AA✗
- Slate Gray 4.40:1 AA✗
- Steel Blue 4.35:1 AA✗
- Facebook Blue 4.22:1 AA✗
- Tailwind Violet 500 4.22:1 AA✗
- Material Pink 4.11:1 AA✗
- Material Blue Gray 4.08:1 AA✗
- Forest Green 4.07:1 AA✗
- Tailwind Indigo 500 4.00:1 AA✗
- Bootstrap Blue 3.97:1 AA✗
- Google Blue 3.96:1 AA✗
- Gray 767676 3.93:1 AA✗
- Tailwind Slate 500 3.75:1 AA✗
- Teal 3.74:1 AA✗
- Crimson 3.58:1 AA✗
- Green 3.48:1 AA✗
- Tailwind Blue 600 3.45:1 AA✗
- Dim Gray 3.25:1 AA✗
- LinkedIn Blue 3.14:1 AA✗
- Gray 666666 3.11:1 AA✗
- Link Blue 3.05:1 AA✗
- Material Purple 2.83:1 AA✗
- Tailwind Red 700 2.76:1 AA✗
- Material Brown 2.73:1 AA✗
- Material Indigo 2.60:1 AA✗
- Gray 595959 2.55:1 AA✗
- Material Deep Purple 2.44:1 AA✗
- Tailwind Slate 600 2.36:1 AA✗
- Dark Slate Gray 2.00:1 AA✗
- Purple 1.90:1 AA✗
- Maroon 1.63:1 AA✗
- Gray 333333 1.41:1 AA✗
- Navy 1.12:1 AA✗
Pass contrast everywhere — not just one pair
A free human-led scan finds the contrast failures across your whole site, plus the issues automated checks miss.