Did you know? Astigmatism is a visual condition where there is a refractive error that impedes the eye from focusing light evenly on the retina. This results in objects appearing to be blurry. According to the World Health Organization, refractive errors (nearsightedness, farsightedness, astigmatism and presbyopia) account for 43% of visual impairments occurring globally.

Graph showing astigmatism and normal eye

 

Why is this important?

There is a myth about white text over black backgrounds being the best color contrast combination for accessibility, but in reality, white text on black backgrounds creates a visual fuzzing effect for people with astigmatism called “halation”.

This effect is known to reduce text readability and is particularly bad for people with astigmatism because it can cause terrible headaches.

Fuzzy white text on black background.

 

Users affected around the world

Astigmatism often appears at an early age and increases as we get older. According to a recent study of 2,523 children in the United States between the ages of 5 and 17, more than 28% have astigmatism of 1.0 diopters (D) or greater.

In another study, where more than 11,000 users from the UK who wear glasses participated (both children and adults), the results showed that 47.4% of them had astigmatism of 0.75 D or greater in at least one eye, and 24.1% had the same degree in both eyes.

Almost half of the population has at least 0.5 D of astigmatism, 10% has at least 1 D, and 8% has 1.5 D or more.

Accessibility for astigmatism

Whenever possible, avoid using white text on pure black backgrounds.

Automated contrast-ratio checkers would not detect a problem or any WCAG success criteria failures using this combination of colors, but it will impact end-users. This is another reason why manual testing is still a key component of accessibility testing.

Know your users — astigmatism impacts a wide range of people, young and old. Think and design for everyone. Think accessible.