Accessibility in design
As a designer, you have to pay attention to how colour combinations and contrasts affect how people use and understand our services. But there's more than that, like how big and clickable are links and buttons, is there enough space between them, just to mention a few examples.
The Web Content Accessibility Guidelines
The Gjensidige brand is inclusive and people-friendly, making accessibility one of our personality traits.
As our digital solutions share resources across of Norway, Sweden and Denmark, we are required to comply with Web Content Accessibility Guidelines 2.1. While we must comply with A and AA, we aim to satisfy AAA.
As a designer in Gjensidige, you should be broadly familiar with its contents and consult it when in doubt.
Your checklist
Keep these questions in mind when you work:
- Are your colour combinations easily distinguishable for colour blind users?
- Have you used more than just colour to convey meaning?
- Are the contrasts good enough? (AAA level recommends 4.5:1 for large text and 7:1 for small text)
- Are clickable areas (like buttons) large enough?
- Do clickable areas have enough space around them?
- Are clickable areas visible and specific enough?
Colours
Colour perception vary between users. For best practice, make sure that colours never work alone as the only vehicle of meaning. Information in graphs or diagrams, for example, should always be represented with text as well as colour. When combining colours, keep users with colour blindness in mind. These colour combinations are difficult for many colour blind users:
- Orange combined with green
- Orange combined with pink
- Blue combined with purple
Contrast
All text – and other graphics that carry meaning – must be in sufficient contrast to its background. The degree of contrast is measured using brightness. Maximum contrast is 21:1 for black on white.The contrast requirements depend on the size of the object, and WCAG 2.0 lets text size determine contrast demand:
- At normal text style, a text is considered large at 18 points or more
- Using bold text style, a text is considered large at 14 points or more
- Minimum contrast demand for large text is 3.0:1 (AAA requirements are 4.5:1)
- Minimum contrast demand for small text is 4.5:1 (AAA recommends 7:1)
Contrast requirements can be overlooked for elements that don’t convey meaning, or are considered inactive (such as illustrations).
Measuring contrasts
When colours vary, you should measure the weakest contrast. To do this, you may download the free Colour Contrast Analyser. This tool measures colour in both foreground and background, and calculates their shared contrast ratio. The results also show whether the contrast ratio meets the WCAG 2.0 demands.You can download Colour Contrast Analyser here:
Clickable areas
As some users may have impaired motor skills or simply use your interface on a small touch screen, clickable areas should be
- easily perceivable
- large enough to click
- with enough space around it to avoid clicking other elements by error