การบกพร่องทางสีคืออะไร? ประเภท สาเหตุ และผลกระทบต่อการออกแบบ

Color blindness affects approximately 300 million people worldwide — roughly 1 in 12 men and 1 in 200 women. It is one of the most common genetic traits in the human population, yet the majority of visual interfaces are still designed with the implicit assumption that all users perceive the full visible spectrum the same way.

Understanding color blindness — its biological basis, its different types, and its design implications — is not just an accessibility checkbox. It is a practical skill for any designer, developer, or product manager who wants their work to communicate clearly to the full range of users who will encounter it.

How Human Color Vision Works

Before examining what goes wrong in color blindness, it helps to understand how normal color vision works.

The retina at the back of the eye contains two types of photoreceptors: rods and cones. Rods are responsible for low-light and peripheral vision but do not distinguish color. Cones are the color-sensitive cells, and they come in three types:

• L-cones (long-wavelength): Peak sensitivity around 560nm, in the red-orange range
• M-cones (medium-wavelength): Peak sensitivity around 530nm, in the green range
• S-cones (short-wavelength): Peak sensitivity around 420nm, in the blue-violet range

Normal color vision — trichromacy — results from having all three cone types functioning properly. The brain compares the relative signals from L, M, and S cones to derive the perception of hue, saturation, and brightness.

The human visual system uses an opponent color model internally: signals from the three cone types are combined into:

• Luminance channel (L+M): Lightness information
• Red-green channel (L-M): Color discrimination between red and green
• Blue-yellow channel (S-(L+M)): Color discrimination between blue and yellow

Color blindness typically results from an absence, malfunction, or altered sensitivity of one or more cone types, disrupting these opponent channels.

The Genetics of Color Blindness

The most common forms of color blindness are inherited through an X-linked recessive pattern. The genes encoding L-cones and M-cones are located on the X chromosome. Since males (XY) have only one X chromosome, a single affected gene produces color blindness. Females (XX) require two affected copies — one on each X chromosome — to be color blind; if only one is affected, they are carriers but typically have normal or near-normal color vision.

This is why color blindness is far more common in males (approximately 8%) than females (approximately 0.5%) in populations of European ancestry. Prevalence varies by ethnic background, being somewhat lower in East Asian and African populations.

S-cone deficiency (tritanopia) is encoded on chromosome 7, not the X chromosome, so it affects males and females equally — though it is also much rarer.

Deuteranopia and Protanopia: Red-Green Color Blindness

The most common forms of color blindness involve the red-green discrimination system — the L-cone and M-cone pair. Together, these conditions affect approximately 8% of males of European descent.

Deuteranomaly and Deuteranopia

Deuteranomaly is the most common form of color vision deficiency overall, affecting roughly 5% of males. It involves reduced or shifted M-cone (green) sensitivity, reducing red-green discrimination but not eliminating it.

Deuteranopia is the complete absence or non-functionality of M-cones, affecting roughly 1% of males. With no functional green-sensitive cones, deuteranopes are dichromats — they see color along one axis rather than two, dramatically reducing the number of distinguishable colors.

For deuteranopes and people with severe deuteranomaly:

• Red and green are confused: Both may appear as a similar brownish-yellow or olive
• Orange, yellow, and green fall into a similar perceptual range
• Blue and purple are relatively unaffected and distinguishable
• The color #00FF00 (pure green) and #FF0000 (pure red) may appear as near-identical yellowish-brown shades

Deuteranopia does not significantly reduce overall brightness perception, because the luminance channel relies on L+M cones — and L-cones alone can still provide luminance information.

Protanomaly and Protanopia

Protanomaly involves reduced or shifted L-cone (red) sensitivity, affecting roughly 1% of males. Protanopia is the complete absence of functional L-cones, also affecting roughly 1% of males.

Protanopia and deuteranopia produce similar red-green confusion, but with key differences:

• Red appears much darker: Because the L-cone contributes heavily to the luminance channel, protanopes see red objects as significantly darker than they actually are. A red #FF0000 may appear almost black to a protanope.
• Red lights in traffic signals can be difficult to see at night
• Dark red and black are easily confused
• The overall perceptual palette is shifted, with less discriminability in the long-wavelength (red-orange) range

This darkening of red is a practically important distinction: while deuteranopes and protanopes confuse similar colors, protanopes have additional difficulty with low-luminance red elements that may be safety-critical.

Red-Green Design Implications

The red-green confusion category is the most important for UI design because:

1. Traffic light metaphors (green = good, red = bad/error) are extremely common in UI patterns
2. Charts and graphs frequently use red and green to distinguish lines, bars, or series
3. Form validation often uses red for errors and green for success
4. Financial interfaces use red for losses and green for gains

All of these patterns fail for a significant portion of users. Red and green should never be the only differentiating feature of adjacent interface elements.

Tritanopia: Blue-Yellow Color Blindness

Tritanomaly (reduced S-cone sensitivity) and tritanopia (absent S-cones) affect the blue-yellow discrimination axis. Unlike red-green deficiencies, tritanopia affects males and females equally and is much rarer — approximately 0.01% of the population.

For tritanopes:

• Blue and green are confused (both may appear similar)
• Yellow and violet are confused
• Red and pink are difficult to distinguish from yellow-orange
• Night vision is sometimes also affected, as S-cones contribute to scotopic (low-light) vision

Colors commonly confused by tritanopes:

• #0000FF (blue) and #008000 (green) — may appear as similar grayish tones
• #FFFF00 (yellow) and #FF69B4 (hot pink) — both may appear as similar pale oranges
• #00FFFF (cyan) and #FFFFFF (white) — may be difficult to distinguish

Although tritanopia is rare, the design principle it enforces — not using blue-yellow distinctions as the sole differentiating feature — also benefits elderly users, whose lens yellowing can shift blue perception, and users viewing screens under warm artificial lighting.

Achromatopsia: Total Color Blindness

Achromatopsia (rod monochromacy) is the complete absence of functional cone cells. Affected individuals see only in shades of gray — essentially black-and-white vision. It is extremely rare, affecting approximately 1 in 30,000 people.

Characteristics of achromatopsia:

• Complete absence of color discrimination: All color perception is based on luminance alone
• Severe light sensitivity (photophobia): Cones normally regulate sensitivity in bright light; without them, outdoor daylight can be painful or temporarily blinding
• Reduced visual acuity: The fovea (center of the retina) is densely populated with cones; their absence reduces central vision sharpness
• Nystagmus: Involuntary eye movement is common

A related but less severe condition, blue-cone monochromacy, involves functional S-cones only. Affected individuals have very limited color vision and severe photophobia but slightly more color discrimination than full achromatopsia.

For design purposes, achromatopsia is the extreme case of the principle that color alone must never convey essential information. If a design is legible and usable in grayscale, it works for the rarest and most challenging color vision scenario.

Designing Inclusive UIs for Color Blind Users

Designing for color blindness does not mean removing color from interfaces. Color is a valuable communication channel. The goal is to ensure that color is never the only channel carrying critical information.

Principle 1: Never Use Color Alone

Every instance where color conveys meaning should include a redundant cue. The redundant cues most useful for color blind users are:

• Shape: Icons, symbols, and geometric differentiation
• Pattern: Hatching, texture, dashes in charts
• Text labels: Direct labeling eliminates color interpretation entirely
• Position: Spatial arrangement can replace color coding in many contexts
• Border/stroke: An outline or border that changes along with fill color

Example — Form validation: - Bad: Red border for error, green border for success - Good: Red border + error icon (X symbol) + error text label for error; green border + success icon (checkmark) + success text label for success

Example — Charts: - Bad: Two lines distinguished only by red vs. green color - Good: Distinct line styles (solid vs. dashed) + distinct markers (circle vs. triangle) + direct data labels + pattern fills for bar charts

Principle 2: Choose Color-Blind-Friendly Palettes

Some color combinations are more universally distinguishable than others. The most important rules:

Avoid red-green adjacency for critical distinctions. This affects 8% of males — the largest subgroup.

Use blue-orange as an alternative high-contrast pair. #0072B2 and #E69F00 are the IBM Color Blind Safe pair for this reason. They are distinguishable by protanopes, deuteranopes, and tritanopes.

Add luminance contrast, not just hue contrast. A red and green with significantly different lightness values are more distinguishable to color-blind users than red and green of similar luminance. If your chart's red line and green line have similar perceived brightness, they will appear nearly identical to a deuteranope even at high saturation.

Commonly recommended palettes for data visualization: - Okabe-Ito palette: Designed specifically for color blindness safety in data visualization - IBM Color Blind Safe: A curated set of colors that work across the major deficiency types - Viridis, Plasma, Magma: Perceptually uniform colormaps that maintain distinguishability when viewed in grayscale or by color-blind users

Principle 3: Maintain Sufficient Luminance Contrast

WCAG 2.1 contrast requirements exist partly for this reason. Two colors that look distinct in hue but have nearly identical luminance values (similar L* in CIELAB terms) will appear identical to:

• Color blind users who cannot distinguish the hue
• Users in high-ambient-light environments
• Grayscale print or screenshot contexts

Use the Contrast Checker to verify that your color pairs meet at minimum WCAG AA contrast requirements. A 4.5:1 contrast ratio for normal text and 3:1 for large text provides a baseline of luminance differentiation that helps compensate for lost hue discrimination.

Note that WCAG contrast ratios measure luminance contrast, not color blind friendliness directly. A blue and orange with a 4.5:1 ratio will work for most color blind users. A red and green with a 4.5:1 ratio will work for luminance contrast but may still cause confusion for users who cannot distinguish the hue — they will see the brightness difference but not the hue difference.

Principle 4: Test with a Simulator

Use the Color Blindness Simulator to preview how your interface, palette, or design appears under each major deficiency type:

• Deuteranopia: The most common variant; how does the interface read when red and green are indistinguishable?
• Protanopia: Red is both color-confusable and darker; red elements may disappear
• Tritanopia: Blue-yellow confusion
• Achromatopsia: Full grayscale — the ultimate legibility test

Simulating your design is faster and more reliable than asking color-blind colleagues to evaluate every design decision. Make it part of your review workflow, not an afterthought.

Principle 5: Accessible Status Colors

Status color conventions — the most common point of color blindness failure in UI design — can be made accessible with straightforward additions:

The icon and text label are the redundant cues. If a user cannot distinguish the green from the red, the checkmark versus X makes the meaning unambiguous.

Text on Colored Backgrounds

Color blindness can make text on tinted backgrounds harder to read even when the hue difference is obvious to color-normal users. For example, white text on a medium-green background passes WCAG contrast for color-normal users — but if a deuteranope perceives the background as brown rather than green, the white-on-brown may look different than intended. The contrast ratio may still pass, but the aesthetic intent (a green success banner, for example) is lost.

This is generally acceptable for decorative contexts — the intent may not be communicated, but legibility is maintained. For critical status indicators, adding an icon or label removes the dependency on hue interpretation entirely.

Key Takeaways

• Color blindness results from absent or altered cone cells in the retina, disrupting color discrimination along the red-green, blue-yellow, or all-color axes.
• Deuteranopia and deuteranomaly (absent or reduced M-cones) and protanopia and protanomaly (absent or reduced L-cones) together constitute red-green color blindness, affecting roughly 8% of males.
• Protanopia additionally causes red to appear very dark — red elements can appear almost black, a safety-critical concern.
• Tritanopia (absent S-cones) affects blue-yellow discrimination and is much rarer (~0.01%), affecting males and females equally.
• Achromatopsia (absent all cones) is extremely rare but provides the design principle in its purest form: all essential information must be communicated without any reliance on color.
• The primary design rule: color must never be the only channel conveying critical information. Always pair color with shape, pattern, text, or iconography.
• Avoid red-green adjacency for critical distinctions; prefer blue-orange pairs for maximum cross-type distinguishability.
• Use the Color Blindness Simulator to preview your designs and the Contrast Checker to verify luminance contrast meets WCAG requirements.