The sales graph features one red line and one green line. The status column contains red, yellow, and green dots. The required fields in the form are marked in red. All three are perfectly readable on your screen, yet they may completely fail on someone else's screen. You will never receive the report, as readers who struggle to read it often blame themselves.
How many readers are there
The prevalence of color blindness worldwide ranges from 2 to 5 percent. In Indonesia, a reference figure comes from the Urban Eye Health Study in East Jakarta published in Ophthalmologica Indonesiana in 2021. Out of 1,475 respondents, the prevalence of congenital color blindness was recorded at 3.79 percent. In the group of children aged 6 to 16 years, the figure was 5.97 percent, while in the adult group aged 41 to 77 years, it was 3.26 percent.
Two details from this study are useful for anyone designing visual displays. First, the distribution skews towards males: among those detected with color blindness, 76.9 percent in the child group and 91.1 percent in the adult group were male. Second, of the 25 children detected, only 3 parents were previously aware. Most readers who have difficulty reading your graph are unaware of their own condition, let alone report it. For personal assessment, color blindness tests provide initial indications in a few minutes. The results are not a diagnosis, and eye examinations remain the domain of doctors.
One more note that is often overlooked: the majority are not severe cases. Among children with congenital color blindness in the study, 69.3 percent were classified as partial. They can still see colors, but some color pairs blend together.
The rules, complete with numbers
The reference used in almost all accessibility audits is the WCAG from W3C. Three criteria are relevant here, and all have strict thresholds.
1.4.1 Use of Color, Level A. Color must not be the only visual means of conveying information, indicating actions, prompting responses, or distinguishing elements. This is Level A, the most basic level, not an enhancement.
1.4.3 Contrast Minimum, Level AA. Text requires a minimum contrast ratio of 4.5:1 against its background. Large text is allowed a ratio of 3:1.
1.4.11 Non-text Contrast, Level AA. Interface components and graphical objects that convey information require a minimum of 3:1 against the adjacent color. This criterion binds graph lines, status icons, and input box borders.
The differences are significant. Criterion 1.4.1 addresses meaning, while the next two criteria address brightness differences. A design can pass one and fail the other.
The thresholds of 4.5:1 and 3:1 are calculable figures, not matters of taste. The ratios are derived from the relative luminance of the two colors, so two colors that appear sufficiently different can still fail. If you want to check quickly, the color contrast checker calculates the ratio of a pair of colors and indicates which criteria are met.
How binding is this in Indonesia
Law Number 8 of 2016 concerning Persons with Disabilities regulates information access in Articles 122 to 124: the obligation to facilitate communication, ensure access to information, and provide information in accessible and understandable formats. The subjects of this obligation are explicitly stated as the Government and Regional Governments. The law does not impose equivalent obligations on private company websites or materials.
So for most readers, this is not a matter of legal compliance but rather the quality of work. And the quality remains low even among those who are indeed bound. Research published in the Prologia journal in 2023 examined 34 provincial government websites against WCAG 2.1 and found 2,088 accessibility violations, averaging 61 violations per site. The most common type of violation was insufficient color contrast, with 724 occurrences spread across 30 of the 34 sites.
Four improvements that often resolve issues
- Add a second marker. Check and cross icons, line patterns on graph areas, direct labels at the end of lines, or different line thicknesses.
- Increase brightness differences, not just color differences. Red and green with equal brightness will blend; dark red against bright green will remain distinguishable.
- Avoid using red and green pairs for success and failure statuses. Blue against orange is much safer and remains readable by all three types of color vision.
- Do not mark required columns solely with red. Include text or symbols that remain visible when the color is lost.
A quick test is simply one question: if the color is completely removed, does the information still come across? To see the answer without guessing, the color blindness simulator for design transforms your image into views for three types of color vision, and the entire process runs in your own browser. The tool does not examine anyone's eyes; it merely alters the image.
Sources
- Nusanti S, Sidik M. Prevalensi dan Karakteristik Buta Warna pada Populasi Urban di Jakarta. Ophthalmologica Indonesiana 2021;47(2):79-85.
- Amaliah SM, Hafiar H, Dewi R. Analisis Aksesibilitas Website Pemerintah Provinsi Indonesia Sebagai Implementasi Corporate Digital Responsibility terhadap E-Government. Prologia Vol. 7 No. 2, Oktober 2023, hal. 473-486.
- Undang-Undang Nomor 8 Tahun 2016 tentang Penyandang Disabilitas, Pasal 122, 123, dan 124. peraturan.bpk.go.id
- W3C Web Accessibility Initiative. Understanding Success Criterion 1.4.1 Use of Color, 1.4.3 Contrast (Minimum), dan 1.4.11 Non-text Contrast, WCAG 2.2. w3.org/WAI