Adapt given color pairs to adhere to W3C Accessibility standard for ePubs

We are trying to produce ePub publications that adhere to the W3C accessibility standards. One of the remaining issues is insufficient color contrast between the text color and the background color. We use Ace by DAISY (great tool!) which provides information about this sort of issue in both textual form and JSON:

And here is the JSON (it's not very straightforward to extract the two color values from the dct:description, but with a regular expression we manage):

{
  "@type": "earl:assertion",
  "earl:result": {
    "earl:outcome": "fail",
    "dct:description": "Element has insufficient color contrast of 2.86 (foreground color: #fd5f07, background color: #fff5ea, font size: 28.1pt (37.52px), font weight: normal). Expected contrast ratio of 3:1",
    "earl:pointer": {
      "cfi": [
        "/4/2/6/2",
        "/4/2/6"
      ],
      "css": [
        ".inbrief-title",
        ".inbrief"
      ]
    },
    "html": "<div xmlns=\"http://www.w3.org/1999/xhtml\" class=\"inbrief-title\">In Brief</div> <!--##--> <div xmlns=\"http://www.w3.org/1999/xhtml\" class=\"box-container inbrief\">"
  },
  "earl:assertedBy": "aXe",
  "earl:mode": "automatic",
  "earl:test": {
    "earl:impact": "serious",
    "dct:title": "color-contrast",
    "dct:description": "Ensures the contrast between foreground and background colors meets WCAG 2 AA contrast ratio thresholds",
    "help": {
      "url": "http://kb.daisy.org/publishing/docs/css/color.html",
      "dct:title": "Color",
      "dct:description": "Elements must have sufficient color contrast"
    },
    "rulesetTags": [
      "cat.color",
      "wcag2aa",
      "wcag143"
    ]
  }
},

However, I'd like to adapt these colors programmatically to create sufficient contrast between background and text colors by changing the colors as little as possible. For example, if there is a light yellow with white text, change the yellow to a darker hue until it meets the contrast requirement. Or, conversely, make the text black.

Is there an algorithm that one could implement that can do this? I couldn't find anything that seemed useful. When describing the use case above I found myself noticing that it is probably quite a subjective decision and therefore hard to automate.

The first thing you'd have to do is decide which color to change, the foreground or background. What I'd probably do is decide which color is the furthest from white or black because its value could be changed the most.

But before that, you have to figure out which color is light and which is dark. Fortunately, that's pretty easy. Since white is #fff and black is #000, whichever color value is the smallest (ie, closer to #000) is the darker one.

Then just subtract the light color from #fff (hexadecimal subtraction or convert the colors to decimal) and compare that to the darker color.

If the subtracted value for the light color is smaller than the dark color, then the light color is closer to white than the darker color is to black so you'll want to start modifying the darker color.

If the subtracted value for the light color is larger than the dark color, then the light color is further from white than the darker color is from black so you'll want to start modifying the light color.

When changing the color, just add or subtract 1 from each RGB component. Add 1 if you're making the light color lighter or subtract 1 if you're making the dark color darker.

After you add or subtract 1 from each RGB, compute the luminance contrast to see if you're above 4.5 (if the font is small), or above 3 (if the font is large - where "large" is defined as 14pt bold or 18pt normal).

The contrast ratio formula is kind of messy but doable.

(L1 + 0.05) / (L2 + 0.05)

L1 is the relative luminance of the lighter of the colors, and
L2 is the relative luminance of the darker of the colors.

You already know which color is lighter and which is darker.

The relative luminance value (L) is the messy part, although it initially looks simple. It's just:

L = 0.2126 * R + 0.7152 * G + 0.0722 * B

Essentially, it's 21% red, 71% blue, 7% green. But it's not the straight values of R, G, and B from your color. First you have to take each R, G, B value and divide by 255. Then depending on that value, you do some magic on the values.

R = R / 255
if R <= 0.03928 then R = R/12.92
else R = ((R+0.055)/1.055) ^ 2.4 

Do that for G and B too. Now that you have new values for R, G, and B, then you can apply the 21%/71%/7% relative luminance above and that gives you L1 or L2, and then you can add 0.05 to both values and divide L1 by L2.

I told you it was messy but doable. This will give you the contrast value which should be between 1 and 21. (1 is when the two colors are the same [white on white, red on red, orange on orange, etc] and 21 is when the two colors are black (#000) and white (#fff).

If you haven't reached 4.5 (or 3.0, depending on the font size), then add or subtract 1 from each R/G/B again and compute the ratio again.

For funsies, here's an example:

color1 = #5EBA7D (the green background color on stackoverflow that shows the upvote value)

color2 = #FDF7E2 (the yellow background color on stackoverflow for the sidebar)

(The upvote text color is white but that's boring for an example so I chose yellow instead).

It doesn't matter which color is foreground or background. You get the same ratio. So lets use C1 as foreground and C2 as background. If you use a tool, such as CCA, it shows a value of 2.2:1, which fails WCAG 1.4.3.

Let's plug those numbers into the formula.

C1

#5EBA7D
R = #5E (94)
G = #BA (186)
B = #7D (125)

Divide each one by 255

R = 94/255  = 0.368
G = 186/255 = 0.729
B = 125/255 = 0.490

None of those values are less than 0.03928 so we have to apply the messy part. Add 0.055 then divide by 1.055 then raise that to the power of 2.4.

R = ((0.368 + 0.055)/1.055) ^ 2.4 = 0.112
G = ((0.729 + 0.055)/1.055) ^ 2.4 = 0.491
B = ((0.490 + 0.055)/1.055) ^ 2.4 = 0.205

Now you apply the percentages (21%/71%/7%) to get the first color's luminance value.

L1 = 0.2126 * R + 0.7152 * G + 0.0722 * B
L1 = 0.2126 * (.112) + 0.7152 * (.491) + 0.0722 * (.205)
L1 = 0.024 + 0.351 + 0.015
L1 = 0.390

Then you do it for the other color to get L2 = 0.929

L2 was the yellow color so is actually the lighter color and should be L1 in the original formula. So we'll make the green, which is darker, L2.

(L1 + 0.05) / (L2 + 0.05)
= (0.929 + 0.05) / (0.390 + 0.05)
= 2.226

If you use a color contrast tool, you should get the same value, although most tools typically round to one decimal place so you'll get 2.2.

Now that you know the ratio, which color is further away from black or white so you know which color to adjust?

color1 = #5EBA7D (green)
color2 = #FDF7E2 (yellow)

The smaller number is darker (closer to #000 black) so that would be #5EBA7D (green).

How far is the lighter color (#FDF7E2, yellow) from white (#fff)?

#FFFFFF - #FDF7E2 = #02081D

Now, which is bigger? The dark color, #5EBA7D (green), or the distance from yellow to white, #02081D? In this case, the green is bigger so it's further away from black than the yellow is from white.

Doing a gut check, that makes sense. The green isn't very dark, kind of a light-ish green so it's not very close to black. But yellow is very light and is close to white.

Since green is further from black than the yellow is from white, you can start adjusting the green and making it darker. Do this by subtracting 1 from each R/G/B value then recomputing the luminance. It probably won't change much so you'll have to keep adjusting the green and making it darker until you reach 4.5 (or 3.0, depending on font size).

If you program out this case, the green should eventually get to #258144 (which ends up subtracting 57 from each RGB value), which has a color ratio of 4.6 to the yellow.

If any of the RGB values reach 0 before you get to a decent contrast ratio, then you have to start making the light color lighter by adding 1 to each RGB value and recomputing the contrast. By adding or subtracting 1 from each RGB, you keep the color hue. The green is still green but is darker, or the yellow is still yellow but is lighter.

Are you wishing you hadn't asked the question now?

Minor Update: Adjusting the RGB values by 1 each time and recomputing the luminance might not be very efficient. In my example, that would have to be done 57 times. You might want to add or subtract 10 from each RGB component instead of 1 and see how close to 4.5 you get. If not there yet, adjust by 10 again. Once you get greater than 4.5, you can tweak it back a bit and adjust by 2 in the opposite direction until you get as close to 4.5 without going under.