Color Theory Lab
Build colour harmonies on a wheel and check text contrast against WCAG.
What you can learn
- Complementary colours sit opposite each other on the wheel and create strong contrast.
- Analogous colours sit next to each other and feel harmonious.
- WCAG asks for a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text.
Frequently asked questions
What is a complementary colour?
The colour directly opposite on the colour wheel, 180 degrees away. Pairs like blue and orange create high contrast.
What contrast ratio do I need for accessible text?
WCAG AA needs 4.5:1 for normal text and 3:1 for large text. AAA needs 7:1 and 4.5:1.