# Color blindness simulator

> How a color looks with protanopia, deuteranopia or tritanopia (red, green or blue color blindness), using the Machado et al. (2009) model.

Phiên bản tương tác: https://www.calcopenly.com/vi/programming/color-blindness-simulator
Chủ đề: Máy tính lập trình và công nghệ

The simulator converts the color from sRGB to linear light, multiplies it by the Machado, Oliveira and Fernandes (2009) matrix for the chosen type of color vision deficiency, clips each channel to the 0–1 range and converts back to sRGB. The severity 1.0 matrices used here model complete loss of the red-sensitive (protanopia), green-sensitive (deuteranopia) or blue-sensitive (tritanopia) cones. The color shift is the straight-line distance between the original and simulated colors in OKLab.

Designers use it to check whether a color still carries its meaning for people with color vision deficiency. The default red, #E74C3C, becomes the olive #9F8F36 with deuteranopia, a shift of 0.188 in OKLab, and #786D39 with protanopia.

The milder anomalous forms, such as deuteranomaly, are more common than the complete ones and shift colors less, so the simulation shows the strongest effect. Displays and viewing conditions also change how colors look.

## Dữ liệu đầu vào

- **Màu sắc**: #RRGGBB, a CSS name, rgb(), hsl() or oklch().
- **Vision type** (lựa chọn: Protanopia (no red cones), Deuteranopia (no green cones), Tritanopia (no blue cones))

## Kết quả

- Simulated color — kết quả chính
- Protanopia
- Deuteranopia
- Tritanopia
- Color shift (ΔE OK)

## Công thức

$$
\begin{bmatrix}R'\\G'\\B'\end{bmatrix}_{lin} = \Phi_{CVD} \begin{bmatrix}R\\G\\B\end{bmatrix}_{lin}
$$

## Ví dụ có lời giải

### Alizarin red with deuteranopia

- Màu sắc: #E74C3C
- Vision type: Deuteranopia (no green cones)
- **Simulated color: #9F8F36**
- **Protanopia: #786D39**
- **Tritanopia: #FE1B49**
- Nguồn đối chiếu: Separate Python 3.8 decimal script: sRGB → linear (IEC 61966-2-1), Machado 2009 severity-1.0 matrix, clamp, re-encode, round half up

### Pure red with protanopia

- Màu sắc: #FF0000
- Vision type: Protanopia (no red cones)
- **Simulated color: #6D5F00**
- Nguồn đối chiếu: Separate Python 3.8 decimal script: first matrix column (0.152286, 0.114503, −0.003882) re-encoded; blue clamps to 0

### White is unchanged (edge)

- Màu sắc: white
- Vision type: Tritanopia (no blue cones)
- **Simulated color: #FFFFFF**
- **Deuteranopia: #FFFFFF**
- **Protanopia: #FFFFFF**
- Nguồn đối chiếu: Each Machado matrix row sums to 1 within 1e-6, so linear (1, 1, 1) maps to itself (Python 3.8 row sums)

### Blue with tritanopia

- Màu sắc: #0000FF
- Vision type: Tritanopia (no blue cones)
- **Simulated color: #006B96**
- Nguồn đối chiếu: Separate Python 3.8 decimal script: third matrix column (−0.178779, 0.147602, 0.303900) re-encoded; red clamps to 0

## Câu hỏi

### How common is color blindness?

About 8% of men and 0.4% of women of European ancestry have red-green color deficiency, according to a 2012 review of population surveys by J. Birch in the Journal of the Optical Society of America A; among men of Chinese and Japanese ethnicity the figure is 4% to 6.5%. The US National Eye Institute puts it at about 1 in 12 men.

### What is the difference between protanopia, deuteranopia and tritanopia?

Each is the complete loss of one type of cone. Protanopia (no red-sensitive cones) and deuteranopia (no green-sensitive cones) make red and green impossible to tell apart. Tritanopia (no blue-sensitive cones) confuses blue with green, purple with red and yellow with pink, according to the US National Eye Institute. The milder forms, protanomaly, deuteranomaly and tritanomaly, shift colors less.

### What is the most common type of color blindness?

Deuteranomaly, reduced sensitivity of the green-sensitive cones that makes some greens look redder, is the most common type, according to the US National Eye Institute. Red-green deficiencies as a group are far more common than blue-yellow ones. This simulator shows deuteranopia, the complete form of the same deficiency, which is the strongest case of that confusion.

### How do you make colors accessible to color-blind users?

Don't use color as the only way to convey information. WCAG 2.2 success criterion 1.4.1, Use of Color (level A), requires another visual cue such as text, a pattern or an icon, and criterion 1.4.11, Non-text Contrast (level AA), asks for a 3:1 contrast ratio between interface components or graphics and the colors next to them. Check important color pairs here under all three types.

### “Color blindness simulator” chính xác đến mức nào?

Độ chính xác phụ thuộc vào dữ liệu nhập và giả định của phương pháp. Phép tính thập phân dùng 50 chữ số có nghĩa, nhưng ước lượng, phương pháp số và dữ liệu nguồn có thể kém chính xác hơn; làm tròn khi hiển thị không loại bỏ các giới hạn đó. Ví dụ có lời giải đã đối chiếu với nguồn độc lập: 4. Ví dụ, “Alizarin red with deuteranopia” được kiểm tra bằng Separate Python 3.8 decimal script: sRGB → linear (IEC 61966-2-1), Machado 2009 severity-1.0 matrix, clamp, re-encode, round half up.

### Phương pháp này lấy từ đâu?

Machado, Oliveira & Fernandes (2009), A Physiologically-based Model for Simulation of Color Vision Deficiency, IEEE TVCG 15(6):1291–1298; Machado et al. — simulation matrices for severities 0.1 to 1.0; DaltonLens — Understanding CVD simulation (matrices apply to linear RGB).

## Nguồn

- [Machado, Oliveira & Fernandes (2009), A Physiologically-based Model for Simulation of Color Vision Deficiency, IEEE TVCG 15(6):1291–1298](https://doi.org/10.1109/TVCG.2009.113)
- [Machado et al. — simulation matrices for severities 0.1 to 1.0](https://www.inf.ufrgs.br/~oliveira/pubs_files/CVD_Simulation/CVD_Simulation.html)
- [DaltonLens — Understanding CVD simulation (matrices apply to linear RGB)](https://daltonlens.org/understanding-cvd-simulation/)