---
id: 6148e161ecec9511941f8833
title: Step 63
challengeType: 0
dashedName: step-63
---
# --description--
Now, we cannot read the text. Target the `footer` and the anchor element within to set the font color to a color of adequate contrast ratio.
# --hints--
You should use the `footer, footer a` selector.
```js
const gs = (s) => new __helpers.CSSHelp(document).getStyle(s);
assert.exists(gs('footer, footer a') || gs('footer a, footer'));
```
You should set the `color` to a value with a contrast ratio of at least `7:1`. _Hint: I suggest `#dfdfe2`_
```js
function luminance(r, g, b) {
const a = [r, g, b].map((v) => {
v /= 255;
return v <= 0.03928 ? v / 12.92 : Math.pow( (v + 0.055) / 1.055, 2.4 );
});
return a[0] * 0.2126 + a[1] * 0.7152 + a[2] * 0.0722;
}
function contrast(rgb1, rgb2) {
const lum1 = luminance(rgb1[0], rgb1[1], rgb1[2]);
const lum2 = luminance(rgb2[0], rgb2[1], rgb2[2]);
const brightest = Math.max(lum1, lum2);
const darkest = Math.min(lum1, lum2);
return (brightest + 0.05)
/ (darkest + 0.05);
}
const backgroundColour = [42, 42, 64];
const foot = getComputedStyle(document.querySelector('footer'))?.color;
const a = getComputedStyle(document.querySelector('footer a'))?.color;
const rgbFoot = foot?.match(/(\d+),\s(\d+),\s(\d+)/);
const rgbA = a?.match(/(\d+),\s(\d+),\s(\d+)/);
const footColour = [rgbFoot[1], rgbFoot[2], rgbFoot[3]];
const aColour = [rgbA[1], rgbA[2], rgbA[3]];
assert.isAtLeast(contrast(backgroundColour, footColour), 7);
assert.isAtLeast(contrast(backgroundColour, aColour), 7);
```
# --seed--
## --seed-contents--
```html
Accessibility Quiz
