Blog post

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Visually impaired Sven

Visually impaired Sven has the challenging condition Achromatopsia, which means that everything appears gray to him. He also has incredibly poor vision, so he has increased the font size to 64 in his web browser. Those who have created this website probably haven't considered Sven much, so please help make the website readable for him.

Lorem ipsum dolor sit?

Subscribe to newsletter

Things you can test

Zoom the webpage to 400%. How does the page look? Do you need to scroll right to see everything?
Increase the font size to 64px in your browser settings. Does the page respond to it? Hint
How does the page look with large font size and narrow screen? Is there a lot of unnecessary space? Hint
If you were reading this on an iPhone and had set the iPhone font to 64, it probably wouldn't care about your font. Hint

Color Blindness

There are many useful tools for simulating color blindness. I like Colorblindly which is a Chrome extension where you can choose between different types of color blindness and then it shows the page as if you were, for example, red-green color blind.

Turn on color blindness in your browser and click around on links. Can you read them? What about after they are visited? What about on hover? Hint
How does someone with red-green color blindness see if they can press the sign up for newsletter button? Hint

Readability

These questions do not have definitive answers, and they may not actually be wrong, but they are worth asking and considering nonetheless.

How is the focus highlighting on the input field? Is it clear enough for people with poor vision? What about the focus highlighting on the links? Is it good on all backgrounds?
Is the letter spacing adequate? What about line spacing?

Relevant Requirements

1.4.3 - The contrast ratio between text and background is at least 4.5:1.
1.44 - Text can be resized to 200% without loss of content or function.
2.4.7 - Ensure all content receives visible focus when navigating with the keyboard.
1.3.4 - Users must be able to choose whether the content is displayed in landscape or portrait orientation.
1.4.10 - Content should be able to be resized to 400 percent size at 1280 pixels width, without loss of information or functionality.
1.4.11 - Non-text content should have a contrast ratio of at least 3:1 against adjacent color(s).
1.4.12 - Text spacing should be able to be overridden to make the text easier to read.
1.4.13 - Users should have more control over the content on the website that receives focus with a mouse pointer or keyboard.
2.5.2 - Unintended and erroneous input via mouse or touchscreen should be more easily prevented.