Many beautiful sites are difficult to read. Light gray text on a white background looks modern in the design program but disappears in sunlight on a mobile.Accessible designis about more people being able to use what you built - and it's often easier to fix than you think.
What is meant by accessible design?
Accessibility means that a site also works for people with, for example, impaired vision, color blindness or who sit on a bus in bright light. It's not a niche issue: a large percentage of the population has some form of visual impairment, and almost everyone sometimes reads on a small screen in poor conditions. If you make it easier for them, you make it better for everyone.
The standard that governs this is calledWCAG(Web Content Accessibility Guidelines). It is an international regulatory framework for how the web should be made accessible. For many public actors in Sweden, it is a legal requirement, but private companies also benefit from following it.
What is color contrast and why does it matter?
Color contrast is how clearly text stands out from its background. Measured as a ratio, for example4.5:1. The higher the number, the bigger the difference. Black text on a white background has very high contrast; light gray text on white has low.
WCAG sets these guidelines for normal size text:
- At least 4.5:1for plain body (level AA, the most common to aim for).
- At least 3:1too large text (approximately 24px and up, or 19px bold).
- At least 7:1if you want to reach the stricter level AAA.
How do I test the contrast - for free?
You don't have to do the math yourself. There are free tools where you paste the text color and background color and get an answer immediately:
- WebAIM Contrast Checker– a web page where you enter two color codes and see if they pass AA and AAA.
- Built-in tools in the browser.Chrome and Firefox have developer tools that show the contrast value when inspecting text.
- Figma add-onif you design there, which controls contrast directly in the design file.
A quick workaround: take your main text colors and backgrounds, run them through WebAIM, and adjust until they reach at least 4.5:1.
What more than contrast affects readability?
Contrast is half the job. This also makes a big difference:
- Text size.Aim for at least 16px for body text on web. Less than that will be difficult for many.
- Row length.About 50-75 characters per line is fine. Very long lines make the eye lose its way.
- Row spacing.A little air between the lines (about 1.5 times the text size) makes the text easier to follow.
- Avoid text in images.Text that is an image cannot be enlarged or read aloud by screen readers.
- Don't rely on color alone."The red bar is wrong" doesn't work for colorblind people - add an icon or text.
Isn't that a lot of extra work?
Rarely. Most of it is about choices you make anyway: which grey, how big the text, how much air. Choosing a slightly darker gray costs nothing extra but can be the difference between a site that half the mobile users squint at and one that just works. And accessible sites tend to be cleaner and clearer—something that benefits both customers and search engines.
Accessibility is not a difficult function you build on the end. It's a series of small, good choices throughout the design.
Do you want a site that works for everyone?
At ZORC, we build websites with accessibility built in from the start – the right contrast, readable text and structure that works for screen readers. If you are unsure whether your current site is up to the mark, get in touch and we will do a review and point out what is easy to improve.
