By now, you likely have an idea about contrast ratios in web design and when a contrast ratio is too low, it might be difficult for people to read. A contrast ratio is a mathematical way of figuring out whether or not something is readable based on a few different factors, like text size and text color, as well as background color. Generally speaking, WCAG AAA contrast ratio for text is minimum of 7:1. You can use an online contrast checker if you’re unsure; WebAim has a good one! But what happens when the contrast is too high? Does such a thing exist? The short answer is: yes.
Contrast Ratios are a Spectrum
The number you get from comparing font size and color to background color which makes up your contrast ratio only tells one part of the story. You can have a low contrast score which means you should make changes to make your text more readable, a great passing grade, or you can have a very high contrast score. The key is to aim for the middle area, above passing (7:1) but not too high. Creating a contrasting color scheme that ranks in the 14s or higher can actually cause your visitors eye strain, induce headaches, or even worse, cause an epileptic fit with some visitors.
Color Theory and Eye Strain
I’ll never forget when I first enrolled for my Bachelor’s degree at my art college, I was given a shirt. It was bright red, and it had baby blue text printed on it. I gawked at it for a long time because the color combination, when looking at it from afar, caused eye strain. Specifically, it caused a sort of “vibrating” effect that was unpleasant, and I could not believe an art school of all places would make this kind of color decision.
While this particular example does actually fail contrast checks (it scores 1:1 just about), your best way to combat this is by using your due diligence in user experience checks. When scrolling through your page, do any of your color combinations seem to “vibrate” to you? It may be a sign to change the colors on your site.
Here’s some more color combinations that “vibrate”:
Avoiding highly saturated colors for both foreground and background colors are one way you can avoid this trap, but that’s not always the case. You can cause eye strain even when you’re using plain colors like black and white.
The Case for a Non-White, Non-Black Dark Mode
White text on a black background passes with flying colors on a contrast checker at a ratio of 21:1. However, a large area of black background with white text can actually cause undue eyestrain in your visitors. How? Consider the way that eyes work: much like a camera, they will adjust based on the brightest thing in your field of vision, opening the iris or closing it depending on how much light is available. When you’re asking a visitor’s eyes to dilate on a black background, but then focus on white text, the text will cause a strobing, vibration-like effect as the eye struggles to properly open or close based on the brightness in the field of vision.
This means that simply changing something to have a “dark mode” by flipping the background to black and the text to white (or using the invert filter) does not work. No doubt you’ve experienced for yourself trying to read an article on a website in dark mode only to have it difficult to read because the text is white on a black background.
The solution is simple: adjusting for a lesser contrast will help! Changing the background to a dark grey, and the text to a light grey will help. People often cite Discord’s dark mode as one of the best: they use a few different greys to get everything sorted, with a background of #26282b and a foreground of #adb1b9 at its brightest. While it does fail a AAA standard (6.87:1), some modifying of this can help bring you to the right place for the dark mode on your site or app.
Takeaway
Accessibility isn’t just making your website better for people without vision. Everyone – I mean everyone – can benefit from a little care taken in making the web a more inclusive place. When it comes to eye strain and color combinations, you’re helping those with degraded vision, those with colorblindness, helping those with perfect color vision, and you’re even helping yourself twenty years down the road when your vision inevitably degrades!
Need help making your site more accessible – without the accessibility overlays? Contact Foundation today!