Explore the Color Theory Lab
Build colour harmonies on a wheel and check text contrast against WCAG. Free, no signup, runs in your browser.
- Free to use
- No signup
- Nothing to install
- Runs in your browser
See it in action
The Color Theory Lab with sample data entered and the result showing.
What is the Color Theory Lab?
Build colour harmonies on a wheel and check text contrast against WCAG. It runs in your browser, so a change to a setting or a drag on an object shows up at once.
Designers, artists, web developers and photographers use colour harmony and contrast checks to make brands, interfaces and posters that look good and are readable for everyone.
3 steps to your result
Open the tool and follow along. Nothing to install.
What you get
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.
Pick a base colour and switch through the harmonies.
Find a text and background pair that passes WCAG AA.
Lower the saturation to see muted palettes.
Used for
Pick one to see how it fits.
Intro to Design learners
Design, art and web students, and beginners learning the basics of colour, layout and accessibility.
Try it freeTeachers
For teachers: project the Color Theory Lab on the board, let students predict the result, then run it together and test this: Find a text and background pair that passes WCAG AA. For students: change one thing at a time and write down what changes.
Try it freeHow it compares
A plain look at this tool next to the usual alternative.
| This simulation | Textbook diagram | |
|---|---|---|
| Interactive | Drag, tap and change settings | Fixed picture |
| Install | Nothing to install | Not needed |
| Cost | Free to use | Depends on the book |
Questions people ask
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.
Is the Color Theory Lab free to use?
Yes. The Color Theory Lab is free, needs no signup or download and runs in your web browser. It is part of the Intro to Design group of AZRS simulations.
Does the Color Theory Lab work on a phone or tablet?
Yes. The Color Theory Lab takes touch input as well as mouse input, so you can use its 6 adjustable settings with a finger. A larger screen makes the controls and graphs easier to read.
How do I use the Color Theory Lab?
1. In the Color Theory Lab, use the controls to change Base colour, Harmony, Saturation, Lightness, Text, and more. The simulation reacts instantly. 2. In the Color Theory Lab, pick an option such as Complementary, Analogous, Triadic, Split-comp. to switch modes or load an example. 3. In the Color Theory Lab, press "Swap text / background" to start, reset or change what is happening. 4. Start with this experiment: Pick a base colour and switch through the harmonies. Drag any glowing handle, object or slider with your mouse or finger and the Color Theory Lab responds in real time. 5. Change one setting at a time and watch which readout moves, then compare it with this idea: Complementary colours sit opposite each other on the wheel and create strong contrast.
More free tools
Related to the Color Theory Lab.
Try the Color Theory Lab now
Build colour harmonies on a wheel and check text contrast against WCAG. Free to use.
Try it free