Clashing Colors

Let’s say a client hands you a color palette:

E903FCFAE00CFDF30309AED4

I know, it’s pretty garish, but the guy loves Miami Vice. Let’s humor the poor sap and look at all the color combinations:

FAE00CFDF30309AED4E903FCFDF30309AED4E903FCFAE00C09AED4E903FCFAE00CFDF303

Yikes on bikes — that’s ugly! But still, are any of these pairs useable? According to Colorable by Brent Jackson, just one: #FDF303#E903FC

Colorable calculates contrast ratios for every color combination in your palette, checks whether they pass basic aa & high contrast aaa thresholds, and returns the results in JSON. The greater the ratio, the more suitable the color pair:

javascript [ { hex: "#E903FC", name: "pink", combinations: [{ hex: "#FAE00C", name: "manilla", contrast: 2.6740233766119865, accessibility: { aa: false, aaLarge: false, aaa: false, aaaLarge: false } }, { hex: "#FDF303", name: "lemon", contrast: 3.0591253150885827, accessibility: { aa: false, aaLarge: true, aaa: false, aaaLarge: false } }, { hex: "#09AED4", name: "cyan", contrast: 1.3625996936257574, accessibility: { aa: false, aaLarge: false, aaa: false, aaaLarge: false } }] }, ...

Here’s to never clashing with your clients again! See what I did there?

Comment with markdown & emoji
2017 Neal Shyam