Just had a play, that wave extension for firefox is really good - I'm going to use it to fix my blog theme (low contrast issues and a missing language declaration but otherwise not to bad - it is just plain html with no JS).
Does anyone know of a site for fixing low contrast. My blog has v.pale grey (like #EEE), on a dark-green background. To me - normal vision - it looks high contrast.
What I'd like is to see what the Lighthouse tool considers fixed text (eg with either foreground or background adjusted, then with both) to help decide how to fix it. Probably showing images of the failing elements put through colour-blindness imitating filters would be useful too.
As it's just my blog I've left it ("works for me"!); but I try to always deliver 100% pass on mainstream automated tools as a first approximation of a working site.
You can try to look at your site on your phone out in bright sunlight, but the thing about contrast is... you don't have to trust your eyes.
You can mathematically know if something has enough contrast.
The guidelines for AA contrast is 4.5:1 for most text and 3:1 for large text. But... it may be hard to understand what those ratios mean. Basically Lightest Color relative brightness:Darkest color relative brightness.
https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-cont...
The US Web Design system shows one way to solve it (ie, use their css token system that labels colors to make contrast differences super clear) but they also link to several very good resources on contrast.
Things like the WAVE tool (https://wave.webaim.org/extension/) will also have places where you can see contrast errors. In the WAVE tool, it's the third button at the top of the results [styles][no styles][contrast].
You can then see the contrast errors and try out some different options right there in the tool, until the errors go away, and you know what you can replace in your code.
Does anyone know of a site for fixing low contrast. My blog has v.pale grey (like #EEE), on a dark-green background. To me - normal vision - it looks high contrast
Automated tools are a good start, but they're not the be-all and end-all. They aren't always right because they're mathematical approximations of reality.
For a site I'm working on the art department specified a set of colors that validate perfectly in the automated a11y tools, but are a visual disaster.
One thing that helps, though, is to make sure your computer and monitor(s) are all in the same color space. I discovered a few weeks ago that my main preview monitor wasn't set to the same space as my computer, and changing them to match made a world of difference.
Thanks.