Color Accessibility Checker
Check WCAG contrast ratios for Tailwind CSS color pairs. Find accessible text and background combinations that meet AA and AAA standards.
Each page shows the exact WCAG contrast ratio, pass/fail results for AA and AAA levels, and accessible alternatives. All values are computed from the actual color codes.
White on Blue 600 - Contrast Check
WCAG contrast analysis for white text on Tailwind CSS blue 600 background. Contrast ratio: 5.17:1. This combination passes WCAG AA.
Black on White - Contrast Check
WCAG contrast analysis for black text on Tailwind CSS white background. Contrast ratio: 21.00:1. This combination passes WCAG AA.
White on Black - Contrast Check
WCAG contrast analysis for white text on Tailwind CSS black background. Contrast ratio: 21.00:1. This combination passes WCAG AA.
White on Slate 700 - Contrast Check
WCAG contrast analysis for white text on Tailwind CSS slate 700 background. Contrast ratio: 10.35:1. This combination passes WCAG AA.
Slate 900 on White - Contrast Check
WCAG contrast analysis for slate 900 text on Tailwind CSS white background. Contrast ratio: 17.85:1. This combination passes WCAG AA.
White on Blue 700 - Contrast Check
WCAG contrast analysis for white text on Tailwind CSS blue 700 background. Contrast ratio: 6.70:1. This combination passes WCAG AA.
White on Slate 800 - Contrast Check
WCAG contrast analysis for white text on Tailwind CSS slate 800 background. Contrast ratio: 14.63:1. This combination passes WCAG AA.
Gray 900 on White - Contrast Check
WCAG contrast analysis for gray 900 text on Tailwind CSS white background. Contrast ratio: 17.74:1. This combination passes WCAG AA.
White on Slate 900 - Contrast Check
WCAG contrast analysis for white text on Tailwind CSS slate 900 background. Contrast ratio: 17.85:1. This combination passes WCAG AA.
White on Gray 800 - Contrast Check
WCAG contrast analysis for white text on Tailwind CSS gray 800 background. Contrast ratio: 14.68:1. This combination passes WCAG AA.
White on Blue 500 - Contrast Check
WCAG contrast analysis for white text on Tailwind CSS blue 500 background. Contrast ratio: 3.68:1. This combination passes WCAG AA for large text.
Black on Slate 50 - Contrast Check
WCAG contrast analysis for black text on Tailwind CSS slate 50 background. Contrast ratio: 20.07:1. This combination passes WCAG AA.
White on Gray 700 - Contrast Check
WCAG contrast analysis for white text on Tailwind CSS gray 700 background. Contrast ratio: 10.31:1. This combination passes WCAG AA.
Black on Gray 50 - Contrast Check
WCAG contrast analysis for black text on Tailwind CSS gray 50 background. Contrast ratio: 20.10:1. This combination passes WCAG AA.
White on Gray 900 - Contrast Check
WCAG contrast analysis for white text on Tailwind CSS gray 900 background. Contrast ratio: 17.74:1. This combination passes WCAG AA.
Slate 800 on Slate 50 - Contrast Check
WCAG contrast analysis for slate 800 text on Tailwind CSS slate 50 background. Contrast ratio: 13.98:1. This combination passes WCAG AA.
White on Red 600 - Contrast Check
WCAG contrast analysis for white text on Tailwind CSS red 600 background. Contrast ratio: 4.83:1. This combination passes WCAG AA.
White on Green 700 - Contrast Check
WCAG contrast analysis for white text on Tailwind CSS green 700 background. Contrast ratio: 5.02:1. This combination passes WCAG AA.
Gray 800 on Gray 50 - Contrast Check
WCAG contrast analysis for gray 800 text on Tailwind CSS gray 50 background. Contrast ratio: 14.05:1. This combination passes WCAG AA.
White on Red 700 - Contrast Check
WCAG contrast analysis for white text on Tailwind CSS red 700 background. Contrast ratio: 6.47:1. This combination passes WCAG AA.
Slate 700 on White - Contrast Check
WCAG contrast analysis for slate 700 text on Tailwind CSS white background. Contrast ratio: 10.35:1. This combination passes WCAG AA.
Gray 400 on White - Contrast Check
WCAG contrast analysis for gray 400 text on Tailwind CSS white background. Contrast ratio: 2.54:1. This combination fails WCAG AA.
White on Indigo 600 - Contrast Check
WCAG contrast analysis for white text on Tailwind CSS indigo 600 background. Contrast ratio: 6.29:1. This combination passes WCAG AA.
White on Green 600 - Contrast Check
WCAG contrast analysis for white text on Tailwind CSS green 600 background. Contrast ratio: 3.30:1. This combination passes WCAG AA for large text.
Black on Amber 300 - Contrast Check
WCAG contrast analysis for black text on Tailwind CSS amber 300 background. Contrast ratio: 14.56:1. This combination passes WCAG AA.
Zinc 900 on Zinc 50 - Contrast Check
WCAG contrast analysis for zinc 900 text on Tailwind CSS zinc 50 background. Contrast ratio: 16.97:1. This combination passes WCAG AA.
Slate 400 on White - Contrast Check
WCAG contrast analysis for slate 400 text on Tailwind CSS white background. Contrast ratio: 2.56:1. This combination fails WCAG AA.
White on Emerald 700 - Contrast Check
WCAG contrast analysis for white text on Tailwind CSS emerald 700 background. Contrast ratio: 5.48:1. This combination passes WCAG AA.
Black on Yellow 200 - Contrast Check
WCAG contrast analysis for black text on Tailwind CSS yellow 200 background. Contrast ratio: 18.05:1. This combination passes WCAG AA.
White on Indigo 700 - Contrast Check
WCAG contrast analysis for white text on Tailwind CSS indigo 700 background. Contrast ratio: 7.90:1. This combination passes WCAG AA.
Neutral 900 on Neutral 50 - Contrast Check
WCAG contrast analysis for neutral 900 text on Tailwind CSS neutral 50 background. Contrast ratio: 17.18:1. This combination passes WCAG AA.
White on Violet 700 - Contrast Check
WCAG contrast analysis for white text on Tailwind CSS violet 700 background. Contrast ratio: 7.10:1. This combination passes WCAG AA.
Slate 900 on Amber 300 - Contrast Check
WCAG contrast analysis for slate 900 text on Tailwind CSS amber 300 background. Contrast ratio: 12.38:1. This combination passes WCAG AA.
Gray 300 on White - Contrast Check
WCAG contrast analysis for gray 300 text on Tailwind CSS white background. Contrast ratio: 1.47:1. This combination fails WCAG AA.
White on Purple 700 - Contrast Check
WCAG contrast analysis for white text on Tailwind CSS purple 700 background. Contrast ratio: 6.98:1. This combination passes WCAG AA.
White on Zinc 800 - Contrast Check
WCAG contrast analysis for white text on Tailwind CSS zinc 800 background. Contrast ratio: 14.89:1. This combination passes WCAG AA.
Slate 900 on Yellow 200 - Contrast Check
WCAG contrast analysis for slate 900 text on Tailwind CSS yellow 200 background. Contrast ratio: 15.34:1. This combination passes WCAG AA.
White on Pink 700 - Contrast Check
WCAG contrast analysis for white text on Tailwind CSS pink 700 background. Contrast ratio: 6.04:1. This combination passes WCAG AA.
Black on Lime 200 - Contrast Check
WCAG contrast analysis for black text on Tailwind CSS lime 200 background. Contrast ratio: 17.99:1. This combination passes WCAG AA.
Slate 300 on Slate 50 - Contrast Check
WCAG contrast analysis for slate 300 text on Tailwind CSS slate 50 background. Contrast ratio: 1.42:1. This combination fails WCAG AA.
White on Rose 700 - Contrast Check
WCAG contrast analysis for white text on Tailwind CSS rose 700 background. Contrast ratio: 6.29:1. This combination passes WCAG AA.
White on Neutral 800 - Contrast Check
WCAG contrast analysis for white text on Tailwind CSS neutral 800 background. Contrast ratio: 15.13:1. This combination passes WCAG AA.
Black on Blue 50 - Contrast Check
WCAG contrast analysis for black text on Tailwind CSS blue 50 background. Contrast ratio: 19.30:1. This combination passes WCAG AA.
Gray 900 on Green 50 - Contrast Check
WCAG contrast analysis for gray 900 text on Tailwind CSS green 50 background. Contrast ratio: 16.95:1. This combination passes WCAG AA.
Blue 400 on White - Contrast Check
WCAG contrast analysis for blue 400 text on Tailwind CSS white background. Contrast ratio: 2.54:1. This combination fails WCAG AA.
Slate 900 on Sky 50 - Contrast Check
WCAG contrast analysis for slate 900 text on Tailwind CSS sky 50 background. Contrast ratio: 16.75:1. This combination passes WCAG AA.
White on Cyan 700 - Contrast Check
WCAG contrast analysis for white text on Tailwind CSS cyan 700 background. Contrast ratio: 5.36:1. This combination passes WCAG AA.
Gray 800 on Orange 50 - Contrast Check
WCAG contrast analysis for gray 800 text on Tailwind CSS orange 50 background. Contrast ratio: 13.83:1. This combination passes WCAG AA.
Red 400 on White - Contrast Check
WCAG contrast analysis for red 400 text on Tailwind CSS white background. Contrast ratio: 2.77:1. This combination fails WCAG AA.
White on Sky 700 - Contrast Check
WCAG contrast analysis for white text on Tailwind CSS sky 700 background. Contrast ratio: 5.93:1. This combination passes WCAG AA.
Slate 900 on Red 50 - Contrast Check
WCAG contrast analysis for slate 900 text on Tailwind CSS red 50 background. Contrast ratio: 16.32:1. This combination passes WCAG AA.
White on Teal 700 - Contrast Check
WCAG contrast analysis for white text on Tailwind CSS teal 700 background. Contrast ratio: 5.47:1. This combination passes WCAG AA.
Green 400 on White - Contrast Check
WCAG contrast analysis for green 400 text on Tailwind CSS white background. Contrast ratio: 1.74:1. This combination fails WCAG AA.
Blue 700 on Yellow 200 - Contrast Check
WCAG contrast analysis for blue 700 text on Tailwind CSS yellow 200 background. Contrast ratio: 5.76:1. This combination passes WCAG AA.
Blue 800 on White - Contrast Check
WCAG contrast analysis for blue 800 text on Tailwind CSS white background. Contrast ratio: 8.72:1. This combination passes WCAG AA.
Blue 300 on Blue 50 - Contrast Check
WCAG contrast analysis for blue 300 text on Tailwind CSS blue 50 background. Contrast ratio: 1.66:1. This combination fails WCAG AA.
Red 800 on White - Contrast Check
WCAG contrast analysis for red 800 text on Tailwind CSS white background. Contrast ratio: 8.31:1. This combination passes WCAG AA.
Red 300 on Red 50 - Contrast Check
WCAG contrast analysis for red 300 text on Tailwind CSS red 50 background. Contrast ratio: 1.74:1. This combination fails WCAG AA.
Blue 900 on Blue 100 - Contrast Check
WCAG contrast analysis for blue 900 text on Tailwind CSS blue 100 background. Contrast ratio: 8.49:1. This combination passes WCAG AA.
Green 800 on White - Contrast Check
WCAG contrast analysis for green 800 text on Tailwind CSS white background. Contrast ratio: 7.13:1. This combination passes WCAG AA.
White on Yellow 400 - Contrast Check
WCAG contrast analysis for white text on Tailwind CSS yellow 400 background. Contrast ratio: 1.53:1. This combination fails WCAG AA.
Slate 900 on Blue 100 - Contrast Check
WCAG contrast analysis for slate 900 text on Tailwind CSS blue 100 background. Contrast ratio: 14.63:1. This combination passes WCAG AA.
Purple 800 on White - Contrast Check
WCAG contrast analysis for purple 800 text on Tailwind CSS white background. Contrast ratio: 8.72:1. This combination passes WCAG AA.
Indigo 800 on Indigo 50 - Contrast Check
WCAG contrast analysis for indigo 800 text on Tailwind CSS indigo 50 background. Contrast ratio: 8.88:1. This combination passes WCAG AA.
Indigo 700 on White - Contrast Check
WCAG contrast analysis for indigo 700 text on Tailwind CSS white background. Contrast ratio: 7.90:1. This combination passes WCAG AA.
White on Lime 400 - Contrast Check
WCAG contrast analysis for white text on Tailwind CSS lime 400 background. Contrast ratio: 1.51:1. This combination fails WCAG AA.
Red 700 on Red 50 - Contrast Check
WCAG contrast analysis for red 700 text on Tailwind CSS red 50 background. Contrast ratio: 5.91:1. This combination passes WCAG AA.
Gray 900 on Emerald 100 - Contrast Check
WCAG contrast analysis for gray 900 text on Tailwind CSS emerald 100 background. Contrast ratio: 15.64:1. This combination passes WCAG AA.
Stone 900 on Amber 200 - Contrast Check
WCAG contrast analysis for stone 900 text on Tailwind CSS amber 200 background. Contrast ratio: 14.04:1. This combination passes WCAG AA.
White on Amber 400 - Contrast Check
WCAG contrast analysis for white text on Tailwind CSS amber 400 background. Contrast ratio: 1.67:1. This combination fails WCAG AA.
Green 800 on Green 50 - Contrast Check
WCAG contrast analysis for green 800 text on Tailwind CSS green 50 background. Contrast ratio: 6.81:1. This combination passes WCAG AA.
White on Cyan 400 - Contrast Check
WCAG contrast analysis for white text on Tailwind CSS cyan 400 background. Contrast ratio: 1.81:1. This combination fails WCAG AA.
Purple 800 on Purple 50 - Contrast Check
WCAG contrast analysis for purple 800 text on Tailwind CSS purple 50 background. Contrast ratio: 8.13:1. This combination passes WCAG AA.
Slate 900 on Violet 100 - Contrast Check
WCAG contrast analysis for slate 900 text on Tailwind CSS violet 100 background. Contrast ratio: 15.04:1. This combination passes WCAG AA.
White on Teal 400 - Contrast Check
WCAG contrast analysis for white text on Tailwind CSS teal 400 background. Contrast ratio: 1.86:1. This combination fails WCAG AA.
Emerald 800 on Emerald 50 - Contrast Check
WCAG contrast analysis for emerald 800 text on Tailwind CSS emerald 50 background. Contrast ratio: 7.29:1. This combination passes WCAG AA.
Rose 800 on Rose 50 - Contrast Check
WCAG contrast analysis for rose 800 text on Tailwind CSS rose 50 background. Contrast ratio: 7.30:1. This combination passes WCAG AA.
Gray 900 on Rose 100 - Contrast Check
WCAG contrast analysis for gray 900 text on Tailwind CSS rose 100 background. Contrast ratio: 14.78:1. This combination passes WCAG AA.
Zinc 400 on Zinc 200 - Contrast Check
WCAG contrast analysis for zinc 400 text on Tailwind CSS zinc 200 background. Contrast ratio: 2.02:1. This combination fails WCAG AA.
Amber 900 on Amber 100 - Contrast Check
WCAG contrast analysis for amber 900 text on Tailwind CSS amber 100 background. Contrast ratio: 8.15:1. This combination passes WCAG AA.
Gray 500 on Gray 200 - Contrast Check
WCAG contrast analysis for gray 500 text on Tailwind CSS gray 200 background. Contrast ratio: 3.90:1. This combination passes WCAG AA for large text.
Orange 900 on Orange 50 - Contrast Check
WCAG contrast analysis for orange 900 text on Tailwind CSS orange 50 background. Contrast ratio: 8.83:1. This combination passes WCAG AA.
Slate 900 on Cyan 100 - Contrast Check
WCAG contrast analysis for slate 900 text on Tailwind CSS cyan 100 background. Contrast ratio: 15.95:1. This combination passes WCAG AA.
Teal 800 on Teal 50 - Contrast Check
WCAG contrast analysis for teal 800 text on Tailwind CSS teal 50 background. Contrast ratio: 7.27:1. This combination passes WCAG AA.
Cyan 800 on Cyan 50 - Contrast Check
WCAG contrast analysis for cyan 800 text on Tailwind CSS cyan 50 background. Contrast ratio: 6.99:1. This combination passes WCAG AA.
Gray 900 on Pink 100 - Contrast Check
WCAG contrast analysis for gray 900 text on Tailwind CSS pink 100 background. Contrast ratio: 15.09:1. This combination passes WCAG AA.
Sky 800 on Sky 50 - Contrast Check
WCAG contrast analysis for sky 800 text on Tailwind CSS sky 50 background. Contrast ratio: 7.09:1. This combination passes WCAG AA.
Violet 800 on Violet 50 - Contrast Check
WCAG contrast analysis for violet 800 text on Tailwind CSS violet 50 background. Contrast ratio: 8.19:1. This combination passes WCAG AA.
White on Blue 400 - Contrast Check
WCAG contrast analysis for white text on Tailwind CSS blue 400 background. Contrast ratio: 2.54:1. This combination fails WCAG AA.
Fuchsia 800 on Fuchsia 50 - Contrast Check
WCAG contrast analysis for fuchsia 800 text on Tailwind CSS fuchsia 50 background. Contrast ratio: 7.67:1. This combination passes WCAG AA.
Pink 800 on Pink 50 - Contrast Check
WCAG contrast analysis for pink 800 text on Tailwind CSS pink 50 background. Contrast ratio: 7.22:1. This combination passes WCAG AA.
White on Red 500 - Contrast Check
WCAG contrast analysis for white text on Tailwind CSS red 500 background. Contrast ratio: 3.76:1. This combination passes WCAG AA for large text.
Lime 800 on Lime 50 - Contrast Check
WCAG contrast analysis for lime 800 text on Tailwind CSS lime 50 background. Contrast ratio: 6.84:1. This combination passes WCAG AA.
White on Purple 600 - Contrast Check
WCAG contrast analysis for white text on Tailwind CSS purple 600 background. Contrast ratio: 5.38:1. This combination passes WCAG AA.
Yellow 900 on Yellow 100 - Contrast Check
WCAG contrast analysis for yellow 900 text on Tailwind CSS yellow 100 background. Contrast ratio: 8.07:1. This combination passes WCAG AA.
White on Fuchsia 700 - Contrast Check
WCAG contrast analysis for white text on Tailwind CSS fuchsia 700 background. Contrast ratio: 6.32:1. This combination passes WCAG AA.
Stone 800 on Stone 50 - Contrast Check
WCAG contrast analysis for stone 800 text on Tailwind CSS stone 50 background. Contrast ratio: 14.52:1. This combination passes WCAG AA.
White on Emerald 600 - Contrast Check
WCAG contrast analysis for white text on Tailwind CSS emerald 600 background. Contrast ratio: 3.77:1. This combination passes WCAG AA for large text.
White on Orange 700 - Contrast Check
WCAG contrast analysis for white text on Tailwind CSS orange 700 background. Contrast ratio: 5.18:1. This combination passes WCAG AA.
White on Amber 700 - Contrast Check
WCAG contrast analysis for white text on Tailwind CSS amber 700 background. Contrast ratio: 5.02:1. This combination passes WCAG AA.
Frequently Asked Questions
What contrast ratio do I need for WCAG AA?
WCAG AA requires a minimum contrast ratio of 4.5:1 for normal text and 3:1 for large text (18px bold or 24px regular).
What's the difference between WCAG AA and AAA?
AA is the standard compliance level requiring 4.5:1 for text. AAA is enhanced requiring 7:1 for text. Most websites target AA as the minimum.