chrisphan.com: Improved color contrast tool

I'm now indisputably middle-aged, and my eyesight isn't what it used to be. Specifically, I get very frustrated when text on screens contrasts poorly with background colors.

A hypothetical screenshot of a small portion of a checkout page. The label coupon code is in white text and the background color is a mustardish-yellow. It's hard to read. — It's hard to read this, especially after 40.

A few years ago, I made an JavaScript color contract checker. You specify two colors and the widget will tell you how well the colors contrast, and whether the contrast meets accessibility guidelines.

Screenshot: A widget in which the user can enter as hex triplets (or using the system color-picker) two colors. The widget then shows the relative luminance of each color as well as the contrast ratio and the WCAG 2.0 accessibility ratings for that contrast ratio — The default mode of the tool is the original mode, which evaluates the contrast between two colors.

I just released an improved version of my tool. The upgrades include:

Permanent links to your comparison (in case you find a particular color combo amusing.)
A new mode allowing you to evaluate the contrast between one color and shades of another.
Some help pages: instructions for using the tool and a gentle explanation of colors in CSS.

Screenshot: A widget in which the user can enter a color as a hex triplet, and specify the hue for a second color. The widget then shows how well the first color contrasts with various HSL combinations involving the given hue. — A new mode compares a fixed color against a variety of shades of a different color.

On the technical side, I rewrote the code in TypeScript, a language that I have been meaning to learn.

Color contrast tool
Source code (Codeberg) (MIT License)