Colorblind-Safe Workflows

Most accessibility work focuses on text contrast, which is the easy half of the problem. These entries are about the harder half: making sure two distinct semantic categories stay distinct after a…

Summary

Most accessibility work focuses on text contrast, which is the easy half of the problem. These entries are about the harder half: making sure two distinct semantic categories stay distinct after a CVD transform, picking sequential palettes that survive deuteranopia, and auditing palettes you have already shipped. Start with Okabe and Ito, whose eight-color set is still the safest categorical default; the Viz Palette and Color Oracle simulators are the quickest sanity checks; DaltonLens explains why some simulators lie; and ColorBrewer remains the gold standard for choropleths.

Entries

  1. Color Universal Design (CUD): A guide to figures that survive color-vision deficiency, and the source of the eight-color Okabe–Ito palette. (source)
  2. Points of View: Color Blindness: A one-page column on why red–green fails, with the Okabe–Ito set as a drop-in fix. (source)
  3. Coloring for Colorblindness: Edit swatches and see them as protan, deutan, and tritan viewers would, with Wong, IBM, and Tol sets preloaded. (source)
  4. Accessible Color Sequences for Data Visualization: Six-, eight-, and ten-color cycles tuned for aesthetics, CVD, and grayscale; the ten-color set ships in Matplotlib. (source)
  5. Understanding WCAG Color Contrast: WCAG’s explanation of the 4.5:1 and 3:1 text contrast minimums, and the cases they don’t cover. (source)
  6. WCAG Understanding: Use of Color: WCAG’s rule that information must not depend on hue alone, separate from the contrast tests. (source)
  7. Viz Palette: Preview chart colors as marks and a legend, with a color-vision simulation, before you commit to them. (source)
  8. Color Oracle: A free desktop app that filters your whole screen through protan, deutan, or tritan vision. (source)
  9. Sim Daltonism: A floating macOS and iOS window that simulates color-vision deficiency over whatever is beneath it. (source)
  10. Simulating Color Vision Deficiencies in the Blink Renderer: How to turn on CVD emulation in Chrome DevTools, and how Blink applies the Machado matrices as an SVG filter. (source)
  11. Coblis Color Blindness Simulator: Upload an image and view it under each type of color-vision deficiency. (source)
  12. A Physiologically-based Model for Simulation of Color Vision Deficiency: The CVD model behind most simulators, Chrome DevTools included, with severity as a dial. (source)
  13. Understanding LMS-based Color Blindness Simulations: How CVD simulators work — Brettel, Viénot, Machado — and where open-source versions get the math wrong. (source)
  14. Contrast Ratio Calculator: One color pair, its WCAG contrast ratio, and whether it passes for body text. (source)
  15. APCA Contrast: APCA’s perceptual lightness-contrast score, proposed as a replacement for the WCAG 2 ratio. (source)
  16. Who Can Use: Enter a color pair and see which vision types can read it, and roughly how many people that is. (source)
  17. Colour Contrast Analyser: A free Windows and macOS app: eyedrop any two on-screen colors for a WCAG contrast verdict. (source)
  18. Color Review: Run a palette through protan, deutan, and tritan simulations side by side. (source)
  19. Optimizing Colormaps for Color Vision Deficiency: The paper behind cividis: a viridis variant tuned so color-vision deficiency doesn’t change how the scale reads. (source)
  20. ColorBrewer 2.0: Map color schemes filtered by class count, scheme type, print safety, and colorblind safety. (source)