🤔 Did you know?
Astigmatism is a visual condition by which there's a refractive error which impedes the eye from focusing light evenly on the retina. This results in objects appearing to be blurry.
âť“ Why is this important?
Because there is a myth about white text over black backgrounds being the best colour contrast combination for #A11Y.
Well, thing is, white text on black backgrounds creates a visual fuzzing effect for people with astigmatism called “halation”.
This effect is known to reduce readability of texts and is particularly bad for people with astigmatism because it can cause terrible headaches.
🌎 Users affected around the world
Often astigmatism appears at an early age, so most of our web or app users deal with this difficulty.
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.
Astigmatism also seems to increase with age.
đź“‹Long story told short
Please, do not use 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 — that's why manual testing is still very important for accessibility testing.
Know your users — This problem is affecting a large number of young as well as old people.
Think and design for everyone.
Think Accessible.
