Perceivable explores the impact of text size and contrast on the readability of text-based content on websites. We also introduce alternative text, which enables defining a written description of graphical content on webpages, allowing users who cannot see the content to still understand its purpose.
The Web Content Accessibility Guidelines set out that the visual presentation of normal text content should have a contrast ratio of at least 4.5:1. An exception is given for large text, which should have a contrast ratio of at least 3:1.
Use the interactive panel below to experiment with text size and colour, while observing how the contrast ratio and readability are impacted. Simulate colour blindness to understand the impact of contrast ratio for users with limited colour perception.
Text alternatives should be provided for situations where a user might be unable to view graphical content, commonly due to a disability or limitations of the device being used to view the content.
The alternative text should provide a short description of the graphical content.
Use the interactive panel below to define the alternative text property for the provided image. Then, simulate no graphical content to understand the importance of alternative text.