Prefer English?
Prefer English? Switch the website language for a better experience.
Around 8% of men and 0.5% of women in France have some form of color blindness. On a digital product reaching a few thousand users, that mechanically translates into hundreds of people who may misread a red error button, a red/green chart, or a colored status badge. This is not a minor issue: it touches digital accessibility, RGAA/WCAG compliance, and ultimately a product's conversion rate.
At Mazette.co, we see this problem constantly during UI audits: entire design systems built around color codes (green = success, red = error, orange = warning) with no secondary visual signal whatsoever. In Figma, this is a classic shortcut taken in early mockups, one that then quietly spreads all the way to the final Webflow site without ever being challenged.
The most common misconception is that color-blind people see the world "in black and white." That's false in the vast majority of cases. Color blindness is an anomaly in how certain wavelengths are perceived, not a total absence of color.
A color-blind person does perceive color, but certain hues appear close together, or even indistinguishable, when they are in fact very different to someone with typical vision. The most common case, deuteranomaly, makes green appear duller and closer to red or brown. Total achromatopsia, which removes all color perception, is actually extremely rare.
This is the most problematic combination, since red-green anomalies account for the vast majority of color blindness cases. A red and a green of similar brightness can appear as two very similar shades of brown or olive-yellow, making something like a bar chart or a status indicator completely unreadable without a label or icon.
Blue generally remains well perceived by people with red-green color blindness, which is why it's often recommended as a replacement for green in interfaces. However, blue-yellow color blindness (tritanopia, tritanomaly), which is much rarer, makes blue hard to distinguish from green, and yellow hard to distinguish from light gray.
There are seven families of color blindness, grouped into two broad categories depending on which retinal cones are affected.
| Type of color blindness | Affected colors | Frequency |
|---|---|---|
| Deuteranomaly / deuteranopia | Green perceived as duller, red-green confusion | Most common form |
| Protanomaly / protanopia | Weakened red, red-green-brown confusion | Common |
| Tritanomaly / tritanopia | Blue-green and yellow-gray confusion | Rare |
| Achromatopsia | Total absence of color perception | Very rare |
This distinction matters for design: a generic "color blindness" filter that only simulates deuteranopia will falsely reassure you about an interface that remains unreadable for a tritanopic user.
The rule isn't to eliminate red or green from your palette, but to avoid certain specific pairings and to never use them as the sole carrier of information.
The reference method for assessing color vision remains the Ishihara test, made up of pseudo-isochromatic plates where a number or shape stands out against a background of colored dots. This is the test behind most of the "color-number color blindness tests" found online.
Other formats exist too: the color-square color blindness test (sorting shades by hue order, Farnsworth-Munsell style) and specific blue-yellow tests to isolate tritanopia. A free online color blindness test gives a useful indication but doesn't replace an ophthalmologist's diagnosis, since screen display and calibration can skew the result.
On the design tool side, two approaches complement each other:
At Mazette.co, our habit is to build this simulation test directly into Figma design reviews, before handing off to Webflow development. Catching a contrast issue at this stage takes a few minutes; fixing it once the site is live means an entire redesign cycle.
Color blindness is most often hereditary (linked to the X chromosome, which explains why it's far more prevalent in men) and present from birth. It is usually detected between ages 4 and 7, when children need to name and match colors at school, through a simple screening test with an ophthalmologist or school doctor. Early detection makes it possible to adapt teaching materials, which often rely heavily on color coding.
Administratively, color blindness does not grant disability recognition status in France, except in exceptional cases linked to a broader condition. It remains, however, a recognized functional limitation, one that can restrict access to certain professions (pilot, some safety-related roles) and that fully justifies the digital accessibility requirements imposed by RGAA and WCAG standards.
Best practice is to treat color accessibility as a design system constraint, not as an after-the-fact fix.
This is exactly what a well-built design-development collaboration is about: an accessibility rule defined in Figma but left undocumented consistently gets lost during integration. Our product design teams build these checks directly into the design phase, in sync with the Webflow development work that follows.
{{webdesign}}
We see it project after project: the question of color for color-blind users almost always comes up too late, during user testing or, worse, after launch. This is design system work, not a graphic detail. A simple, effective habit to adopt: ban, internally, any critical information encoded solely through hue, starting at the wireframe stage. Once this rule is written into your Figma component guidelines, it prevents 90% of the issues we usually end up fixing urgently on interfaces that are already in production.
We've also noticed, while working on design content SEO, that this kind of technical topic drives qualified, recurring traffic, with still relatively open search competition: few French product design agencies cover the subject in depth, even though the query generates solid search volume year-round. That's a clear signal that color accessibility remains a pain point that's poorly covered, both in terms of content and actual agency practice.
Want to audit your design system through an accessibility lens, colors included? Our method builds this check into the design phase from the start. Browse our portfolio to see how these rules translate into real interfaces, or contact us to discuss it.
Code
Over 120 companies have already stepped out of the shadows with us.
Use a color blindness simulation plugin directly in Figma to view your designs through the lens of the main types of color blindness (protanopia, deuteranopia, tritanopia). Combine it with a contrast checker to make sure information stays legible even without hue distinction. Prioritize testing functional components: action buttons, status badges, and charts.
Avoid relying solely on the red and green pairing to encode important information like an error or a confirmation. Also avoid red-orange-green gradients in charts and gauges. Favor blue and orange, which are better distinguished by most color-blind profiles, and always back up color with text or an icon.
Yes, color blindness is most often hereditary, passed down through the X chromosome, which explains why it is far more common in men. It is present from birth but usually detected between ages 4 and 7, when children start having to match and name colors at school.
Impactful titles, polished meta descriptions, sitemaps, Schema.org, Hn structure, and audits: these are the SEO foundations that make your content readable by both Google AND generative AI. We cover both simultaneously.
With over 180 clients, our agency is one of the few in France to hold the Webflow Premium Partner label, supporting you in every area, including custom web design, sophisticated automation, conversion optimization, and SEO and GEO visibility.
We create bespoke web designs focused on performance, user journeys, and conversion. Join over 180 clients who have trusted us to elevate their brand.
