Your Text Here
(you can type in here if you want!)
- What?
- It's a WCAG Contrast Checker for working with translucent overlays.
-
bg + (overlay color * opacity) : fg - This tool calculates the contrast ratio of text on background when using a semi-transparent overlay. Provide a background color, an overlay color, and a foreground/text color, and the tool will calculate the contrast ratio, seen in the bottom right.
- Given that background images will usually have dynamic color ranges, this tool can only approximate an average ratio; use your actual real life eyeballs in addition to the ratio calculation.
-
The
WCAG guidelines
use the following thresholds:
- greater than 4.5:1 is "AA" status;
- 3.0-4.5 is "A";
- less than 3 means you have failed.
- How?
-
-
Select a background or upload a background image. If you choose
an image, this site will get the dominant color of the image,
using
Color Thief.
(Note that your image will not actually be uploaded anywhere, everything here is client-side.) - Select a font color and an overlay color. Use the slider to adjust the opacity of the overlay.
-
Select a background or upload a background image. If you choose
an image, this site will get the dominant color of the image,
using
Color Thief.
- This site will then apply the overlay to the background color, or the image's dominant color, and use the font color to give you a WCAG grade. After tweaking and adjusting, you can grab the resulting CSS from the "click to copy" button.
- Why?
- Because it's a deceptively difficult task. There are plenty of tools online that will check contrast ratio, but they don't often make it easy to use opacity-based blend and then to tweak the colors to get a decent ratio. The idea of this tool is that it allows you to tweak the knobs a bit better. Additionally, the image palette generation part isn't super common.
-
Once upon a time, I made a background with an overlay. The contrast was great! But then my "stakeholder" felt the background was too dark. Too dark, she said. Is that even possible? She gave me a target color, and asked me to blend the background color with the overlay to reach that target. I don't know if you know anything about color theory, but the math involved in that request is...from another planet. So I made this. Now I never have to do that math, and, hopefully, with this little tool, you can avoid it, too. - Ok but actually why
- I'm sure there are better tools for this. But, as you know, making things is fun.
- Who?
- It's mine. I did this.
text: #182a2f
background: #3c6d88
overlay:
#b9cfdd at
50%
background-color: rgb(60, 109, 136);
background:
linear-gradient(#b9cfdd80, #b9cfdd80),
url('');
color: #182a2f;