Making the Contrast Checker
This is a small behind the scenes look at how I made this and the code behind it. I used JavaScript and CSS to create this; most of which was self-taught. I have only included small snippets here, rather than the entire source code. The program is original but I used formulas and guidelines from the WCAG.
​
Above on the left shows the basic flowchart/plan I used before writing the code. I broke this down into easy chunks for me to write.
Above on the right is a sketch of the interface prior to creating it digitally.
This Converts the HEX codes into RGB
The Hex code for the colour is 6 digits, each written in base 16.
.Computers only display red, blue or green pixels. Each is represented by 2 digits in the hex code
00 is off and FF is full/max.
# FF 0000 is bright red. The red is set to the max, while green and blue are off
# FF 00 FF is magenta. Red and blue are max while green is off.
#FFFFFF is white. When working with light (additive colour) Red,blue and green mix to make white.
#000000 is black, as all the pixels are off.
Uses the WCAG formula to calculate relative luminance and check it is using the correct colour space.
​
Because I used an Array, sRBG = [r, g ,b]
R is in the 0th position, so sRGB[0] is red.
G = 1. B = 2.
​
0.2126 * srgb[0] is the same as 0.2126 * R
Compares the relative luminance of 2 colours and uses this to calculate a ratio. This ratio is how we quantify colour contrast.
Just looking at a colour is not always enough as we all see differently. This makes it easy to follow guidelines such as the WCAG.
Uses the contrast ratio to see if it meets AA or AAA guidelines; for this, a contrast ratio over 4.5 meets AA standards and AAA is over 7. If it passes - the box lights up green, if it fails it lights up red.
The lighten/darken buttons were created by converting the RGB code to HSL (Hue, Saturation and Lightness) and using those to make colours be incrementally lightened or darkened without turning too grey/murky.