Color Theory Lab
Build colour harmonies on a wheel and check text contrast against WCAG.
About the Color Theory Lab
Free intro to design colour lab. Pick a base colour, explore complementary, analogous, triadic and split-complementary palettes, and check WCAG contrast ratios instantly. Built for intro to design, the color theory lab runs instantly in your browser: change a setting or drag an object and the result updates at once, so you learn by trying things out rather than only reading about them.
Build colour harmonies on a wheel and check text contrast against WCAG. Use it to explore intro to design ideas at your own pace, then check what you found against the key ideas further down this page.
How to use the Color Theory Lab
- Use the controls to change Base colour, Harmony, Saturation, Lightness, Text, and more. The simulation reacts instantly.
- Pick an option such as Complementary, Analogous, Triadic, Split-comp. to switch modes or load an example.
- Where you see a glowing handle, object, weight or atom, drag it with your mouse or finger. Everything responds in real time.
- Watch the readouts and graphs update as you experiment, and compare what you see with the key ideas below.
Things to try
- 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.
- Copy a palette and paste it into your design.
Key ideas 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.
Where this is used in the real world
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.
Who is this simulation for?
Design, art and web students, and beginners learning the basics of colour, layout and accessibility.
For teachers: project it on the board, let students predict what will happen, then run it together. For students: change one thing at a time and write down what changes.
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.
Is the Color Theory Lab free to use?
Yes. It is completely free, with no signup, no download and no ads inside the simulation. It runs in your web browser.
Does the Color Theory Lab work on a phone or tablet?
Yes. It uses touch as well as the mouse, so you can drag objects with your finger. A larger screen makes the controls easier to see.