Improve accessibility by making all text have a contrast ratio of 4.5:1

Stuart Wright

Stuart Wright

Well-known member
I have been doing a lot of work to improve the Lighthouse scores for AVForums. The higher the scores for Performance, Accessibility, Best Practises and SEO, the more Google likes your site.
One of the issues has been ensuring that the contrast ratio of text is a minimum of 4.5:1 so that it’s more accessible to people with impaired sight and it passes the Lighthouse Accessibility tests.
I don’t think all of Xenforo’s default style text passes this test, but I believe it should as many people will use the standard style as a basis for their site design.
A very nice to have feature would be to display the contrast number in style property areas where the font color and background color values are editable.
(As an aside, when I try to run the Lighthouse Chrome extension to get a score on Xenforo.com, Lighthouse crashes).
 
Upvote 11
Accessibility is an increasing problem for our sites.

Key things that need fixing at the core level:
  • default text avatar contrast ratio is too low
  • date/time text contrast is too low
  • missing title elements and some aria labels on critical items
 
There's quite a few places that currently fail where it would be nice to be fixed just to reduce eye strain.

There's a couple of spots where selected or highlighted text gets lighter for emphasis, when they should really be getting darker or bolder for emphasis as the lighter colour makes it even harder to read when it's on a light background, for example tab highlighting here

1609971188365.webp

Also the push notification notices use oranges and blues that are so subtle there's hardly any contrast. I'm pretty sure they fail the contrast checks last time I looked.
 
Back
Top Bottom