Tools · Design Tools
Color & Accessibility Checker
Check contrast, convert formats, and preview text on a background.
5.17 : 1Contrast ratio
PassNormal text AA
PassLarge text AA
FailNormal text AAA
Formats
Text: HEX #2563EB · rgb(37, 99, 235) · hsl(221, 83%, 53%)
Background: HEX #FFFFFF · rgb(255, 255, 255) · hsl(0, 0%, 100%)
Palette
Lighter #3F76ED · Darker #2157CF · Complementary #EBAD25
Colors stay in this session. API: None.
How to use it
- Pick or type a text color and a background.
- Read the contrast ratio and AA/AAA results.
- Copy HEX, RGB, or HSL if you need the value in code.
Which standard is this?
WCAG 2.2 Success Criteria 1.4.3 Contrast (Minimum) and 1.4.6 Contrast (Enhanced) use the relative luminance formula from WCAG 2.0. It does not claim to be a full WCAG audit.
Read the original guide: Check contrast before you ship a color pair.