Accessibility as a UX factor
A very important and little talked about subject in the professional community is accessibility. But before going deeper into this subject, accessibility is defined according to W3C as:
Accessibility: condition for the use, with security and autonomy, total or assisted, of spaces, furniture and urban equipment, buildings, transport services, and devices, systems, and means of communication and information, per disabled person or person with reduced mobility;
In general, many professionals ignore this subject because a small percentage of users have some type of cognitive disability, whether physical, visual, or mental. If we think in a simple way people who do not have any kind of disability can use an accessible website but in the opposite scenario, it does not happen in the same way.
So how to change this scenario?
Catequiring stakeholders and professionals about the importance of accessibility from the beginning of any project is a good path. The possibility of increasing the site’s font, changing color, contrast, and fonts for dyslexics are good points to think about. I’m not talking about complexes and large investments in technology to apply these points, but good practices that will naturally improve the experience of both types of users: disabled and non-disabled.
Font size
According to W3C, we should work with sources on three levels that are: A, AA, and AAA. Users who are short-sighted may have difficulty reading on a page with a small font while the dyslexic may not be able to read the text if there is no version of the site with the OpenDyslexic font, which is suitable for this audience. For text images and text, the AA level is the recommended minimum.
The Bear App works with Open Dyslexic so that dyslexics can create texts without reading problems.
Color Contrast
Following this logic, text and text images at level AA must have a minimum 4.5:1 color contrast ratio. This means that the color of the text must be at least 4.5x brighter than the background color. This calculation is done including people with moderate vision and who do not need a contrast assistant and also people with color blindness.
In the AAA level scenario, the ideal contrast index goes to 7:1, i.e. the color brightness should be 7x brighter than the background color for people with vision between 20/20 and 20/80 according to the Snellen chart. People who have a loss of vision above 20/80 need assistive technology to increase contrast and magnification of text.
Color and text contrast
The size of the text is also important to define the amount of contrast that should be applied to the font. A gray example with the value of 150, 150, 150 in RGB scale works very well on a white background, but only above 18 font size points. This format would pass the AA test compliance.
If we use gray with a value of 110, 110, 110 in RGB scale it would already work with any font size and still be AAA compliant in 18 point fonts. Contrasts may vary depending on the type of family being used. That’s why it’s good to think about Light and Extra Light weight fonts because they can present contrast problems.
It is important to also take into consideration the sources that are used to degrade. This does not limit creativity when it comes to producing a project that has a strong appeal in color and contrast. It is necessary to test different applications to make sure they are in conformity with contrast.
Compliance Tools
Some free tools are available to test the conformity of the fonts and colors of our project.
Colour Contrast Analyser
This tool has some very interesting features for a free version. Besides the compliance tests, it is possible to test the different types of color blindness applied in the project and a comparison of them, including who has a cataract. It has for Mac OS and Windows.
Contrast Ratio
This online tool allows testing different colors in real time. It is very useful because it is free. It supports RGBA and HLSA values and their combinations. The interesting part is the support for color transparency testing.
Color Safe
This online tool allows you to create color combinations for accessible projects. So you can choose a background color, a font and the size and see what better conformity it brings as a result.
