The shade distinction between textual content and the background behind it’s crucial for visually impaired consumers. CheckMyColours.com is considered one of a number of providers that may measure the distinction, to make sure it meets minimal requirements for accessibility.
The essence of accessible colour distinction is straightforward. Given a foreground shade and a background colour, the distinction between these two have to be distinguishable in all kinds of environments, by people with totally different shade notion talents. Using the Web Content Accessibility Guidelines – WCAG — model P.zero, these contrasts are measured utilizing an algorithm that compares the relative luminosity of the 2 colours and returns a ratio, which is to exceed WCAG’s advisable minimal.
But the truth of colour distinction is extra difficult. There are loads of assumptions to work out earlier than you could be assured that visually impaired consumers can use your ecommerce website.
What Are ‘Foreground’ and ‘Background’ Colors?
The phrases “foreground” and “background” are used ceaselessly in references to paint distinction. The commonest distinction state of affairs is between textual content and the colour of the background behind it. The foreground colour refers clearly to the textual content and the background, nicely, to the background colour. This is obvious.
But there are different situations the place foreground and background aren’t actually the suitable phrases. In these situations, a greater description is “any state of affairs the place the one attribute obtainable to differentiate two parts is shade.”
This clearly applies when textual content must be distinguished from the background colour. White textual content on a white background might as properly be absent completely. But it additionally applies to neighboring textual content, similar to a hyperlink inside a paragraph. If that hyperlink appears the identical because the textual content surrounding it, there might be no method of figuring out visually which textual content is linked.
If your hyperlinks are underlined, this turns into a non-challenge.
What Two Colors Are We Comparing?
The easy case of textual content in a single shade and a background in one other is straightforward. When assessing distinction, automated instruments will reliably determine the 2 totally different colours.
But that isn’t true with different widespread instances:
- Text with textual content-shadow;
- Background gradients;
- Image backgrounds;
- Transparency in a number of colours.
These instances aren’t instantly addressed by WCAG tips. You’re left having to make your personal selections on distinction. However, there are some useful suggestions and guidelines to lean on.
Adding a skinny black define with a minimal width of 1 pixel is a WCAG suggestion to take care of a distinction ratio between the letter and its background. While this doesn’t immediately correlate to textual content shadow, it’s affordable to extrapolate that including a textual content shadow to darken the boundary of your textual content lets you use it for measuring distinction, relatively than relying on the background colour.
When the textual content isn’t towards a strong colour, it’s exhausting to know precisely what you need to be evaluating it to. A respectable rule is that at the least 50 % of each character must be on a background that meets shade distinction. A good method for coping with the issue might be to make use of a textual content shadow, since assembly that fifty % threshold could be troublesome.
With background photographs and gradients, there are different points past shade, comparable to visible confusion brought on by textures or shapes that interrupt the trail of the letter shapes. I’ll broaden on that matter in a future submit.
Challenges with Transparency
Transparency is the relative opacity of a shade; larger transparency permits extra of the background to bleed via. Transparency is extra a problem with automated testing. Not all automated colour distinction instruments will perceive it. So when textual content or background colours are specified utilizing an RGBA or HSLA definition, there’s a very good probability that they’ll decide up the flawed colour. This might imply you’ll get false positives or false negatives when operating automated exams.
A false constructive is comparatively straightforward to cope with: You can take a look at the situation the place the check picked up the flawed colour and use an eyedropper software to determine the colour that’s rendered on the web page to make a guide comparability.
False negatives are harder. If a software didn’t acknowledge an issue as a result of it misidentified the colours, you’re sometimes caught utilizing your personal eyes to evaluate suspicious areas of the web page. Spotting shade distinction issues takes follow, and may typically be fairly shocking.
If you’ve good colour notion, you’ll be able to doubtless see all the numerous areas on the web page. You can spot textual content that appears too faint, and manually check these colours. But as a result of the measurement of luminosity is designed to compensate for issues in colour notion, chances are you’ll end up believing that two colours cross simply once they fail the check severely. A vital distinction in colour notion might be insignificant in luminosity. Viewing a web page in grey scale is an efficient solution to take away colour notion as a think about distinguishing these points.
What Are the Contrast Requirements?
The WCAG’s shade distinction necessities range relying on font measurement. But the WCAG references solely two font sizes, so this ought to be easy. Normal textual content, at a font measurement under 18 factors (or 14 factors and daring) should have a distinction of A.H:M. Any textual content bigger than that may have a distinction of O.zero:B.
But what, precisely, is a level? What measurement is eighteen factors?
Points are an ordinary measurement for fonts in print. Seventy-two factors is one inch. This measurement, sadly, is subsequent to meaningless on a pc display. As a end result, factors must be translated into a greater net equal.
The commonest translation is that an 18-level font roughly equals 24 pixels and a 14-level font roughly equals 19 pixels. Whether that is truly correct would depend upon the font; however it’s one of the best approximation I have discovered.
In brief, whereas colour distinction is likely one of the easiest exams to do — evaluating two easy colours — ascertaining precisely what these two colours are in an precise state of affairs poses some challenges. But with a bit of steerage on understanding tips on how to assess these colours, you possibly can readily transfer ahead in analyzing your shade distinction points, to make sure visually impaired shoppers can use your ecommerce website.
Resources for Color Contrast Testing
Automated instruments:
- WAVE Chrome Extension;
- Juicy Studio Accessibility Toolbar;
- CheckMyColours.com.
Manual instruments:
- Color Contrast Tester;
- WebAIM Contrast Checker;
- Contrast Ratio.