How three palettes look to four kinds of vision
Edge case in the numbers: the Okabe-Ito palette and the Lumen palette stay above 15 apart for every kind of vision, but the Phase 7 palette's yellow and orange (4 and 5) fall to 6.0 for deutan vision. In the picture, the Phase 7 rows turn into greys and olives, with the last three squares almost the same. The simulation is a model, not a person: real vision varies, which is why severity 1.0 (the strongest case) is used.
About 1 in 12 men and 1 in 200 women see some colours differently, and everyone loses colour on a bright wall screen. Test a palette with a simulation and with contrast ratios, and never let colour alone carry a meaning.
Change the code and press Run (Ctrl+Enter). Predict what will happen first, then break it on purpose and read what changes. Your edits are saved and match the lesson page.
Ready for more? This phase has 4 hands-on exercises with automatic checks.
Practice questions
Write the code in the editor, run it, then open the model answer to compare.
Write passes(fg, bg, kind) that returns true when the contrast of fg on bg meets 4.5 for "text" and 3 for "graphic". Test #767676 and #777777 on white as text.
In the Lumen palette, which pair is closest for tritan vision, and what would you do if the distance were under 10?
Explain it without notes
Why can't you check a palette for colour-blind readers by looking at it?
What do the WCAG ratios 4.5:1 and 3:1 apply to?
Why is rounding a contrast ratio before comparing it a mistake?
Preview
Console
Nothing logged yet.Expected console output
Phase 7 palette Normal closest pair: 4 and 5 distance 22.4
Phase 7 palette Protan closest pair: 4 and 5 distance 11.8
Phase 7 palette Deutan closest pair: 4 and 5 distance 6.0
Phase 7 palette Tritan closest pair: 4 and 5 distance 20.4
Okabe-Ito six Normal closest pair: 1 and 5 distance 26.1
Okabe-Ito six Protan closest pair: 4 and 5 distance 20.6
Okabe-Ito six Deutan closest pair: 3 and 4 distance 18.0
Okabe-Ito six Tritan closest pair: 1 and 3 distance 15.8
Lumen six Normal closest pair: 1 and 6 distance 25.4
Lumen six Protan closest pair: 3 and 5 distance 19.8
Lumen six Deutan closest pair: 3 and 4 distance 18.0
Lumen six Tritan closest pair: 1 and 3 distance 15.8