Choosing accessible colour contrast
All colour combinations must have sufficient contrast.
- headings must have a colour contrast of at least 3:1
- body text must have a colour contrast of at least 4:5:1
- very high contrast, like pure black text on a white background, can be hard to read and cause eye strain
- avoid placing text over images or textured background - if you must place a solid or a transparent dark background behind the text (assuming the text is in white or other light colours)
Use tools to check colour combinations
- WebAim’s contrast checker tells you if your combinations pass or fail the web content accessibility guidelines (WCAG) at AA and AAA
- Who can use shows how your combinations look to people with certain eye conditions and in certain light settings
- Accessible colours checks your contrasts and suggests alternate text or background colours that will pass WCAG AA and AAA