What is a contrast ratio?
A contrast ratio measures how easy it is to tell two colours apart, based on their relative brightness. It's expressed as a ratio from 1:1 (identical colours, no contrast at all) up to 21:1 (pure black on pure white, the highest contrast possible).
Enter a text colour and a background colour above and the ratio updates instantly, along with a live preview showing what those colours actually look like together.
What contrast ratio do I need for WCAG compliance?
- Normal text needs at least 4.5:1 for WCAG AA, or 7:1 for the stricter AAA level.
- Large text – 18pt (24px) and above, or 14pt (19px) bold and above – needs at least 3:1 for AA, or 4.5:1 for AAA.
- Graphics and UI components, such as icons, form field borders and focus indicators, need at least 3:1 against their surroundings.
Why does colour contrast matter?
Low contrast text is hard to read for anyone in bright sunlight or on a low-quality screen, and it's often unreadable for people with low vision or colour blindness. Meeting WCAG contrast requirements is a legal accessibility obligation in many countries, and it simply makes a site usable by more people.
Should I aim for AA or AAA?
AA is the level most accessibility laws and audits require, and it's a realistic target for most designs. AAA gives an extra safety margin and is worth aiming for where you can, but it can be difficult to hit with brand colours that don't have much natural contrast – in that case, AA is a reasonable minimum.
Once you've found a text and background pairing that passes, the colour palette generator can help you build a full palette around it, and the colour converter will convert the winning hex code into RGB, HSL or any other format you need.