Accessibility
Webalo is all about improving peoples lives, making their work easier and safer. A critical component to this mission, is ensuring we design and build our solutions to cater to users of every kind. Following accessibility standards is the baseline expectation for how we begin to design the best possible solutions for everyone.
Contrast Ratio
Color contrast ratio plays a crucial role in UX design, particularly for accessibility. It refers to the difference between two values, which affects how easy it is to tell them apart. A high contrast makes it easy for all to distinguish between two colors, whereas a low contrast makes it more demanding. In design, it is important that we achieve an appropriate contrast ratio between the background and other elements placed on it, as this ensures that text and graphical elements are easily readable and distinguishable.
For accessibility standards, there are three primary categories that have different contrast ratios;
- Small Text (17pt and below) 7:1. Since there is a lot of detail in a limited amount of space, small text has the strictest contrast ratio. Poor contrast in small text provides a major obstacle for consuming information, and therefore it is important to follow accessibility standards.
- Large Text (18pt and above) 4.5:1. For text at increased size, the contrast ratio does not have to be as high as for small text, which allows us to use some of our brighter tones for headlines and quotes.
- Objects and Components (UI components) 4.5:1. Actionable components or objects that a user is expected to interact with should have the same minimum contrast ratio of large text. This does not apply to objects that are purely for decoration.
Example. When using white text on Presentation Blue, we achieve a contrast ratio of 8.74:1. This ratio is excellent for accessibility in various scenarios, ensuring optimal readability for all users.
Background Color
#095072
#095072
Text Color
#ffffff
#ffffff
8.74 : 1
Contrast Ratio
What is Pyramid?
Pyramid is Webalo’s Design System for product and brand experiences.
for small text.
for large text.
for icons and actionable graphics
Example. Using white text on color #8A969C results in a contrast ratio of 3.03:1, which fails accessibility standards. Though you might find this readable, it may pose readability challenges for other users.
Background Color
#8A969C
#8A969C
Text Color
#ffffff
#ffffff
3.03 : 1
Contrast Ratio
What is Pyramid?
Pyramid is Webalo’s Design System for product and brand experiences.
for small text.
for large text.
for icons and actionable graphics
It's important to check the contrast ratio to ensure that we adhere to accessibility standards. Online tools like Color Contrast Checker provided by Userway allow you to input text color and background color values to evaluate the contrast and confirm that your color combination is compliant.