--- id: 614796cb8086be482d60e0ac title: Step 45 challengeType: 0 dashedName: step-45 --- # --description-- On the topic of visual accessibility, contrast between elements is a key factor. For example, the contrast between the text and the background of a heading should be at least 4.5:1. Change the font color of all the anchor elements within list elements to something with a contrast ratio of at least 7:1. # --hints-- You should use the `li > a` selector. ```js assert.exists(new __helpers.CSSHelp(document).getStyle('li > a')); ``` You should give the `a` element a `color` property. ```js assert.notEmpty(new __helpers.CSSHelp(document).getStyle('li > a')?.color); ``` You should give the `color` property a contrast with the background of at least 7:1. _Hint: I would use `#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 = [27, 27, 50]; for (let elem of document.querySelectorAll('li > a')) { const a = getComputedStyle(elem)?.color; const rgbA = a?.match(/(\d+),\s(\d+),\s(\d+)/); const aColour = [rgbA[1], rgbA[2], rgbA[3]]; assert.isAtLeast(contrast(backgroundColour, aColour), 7); } ``` # --seed-- ## --seed-contents-- ```html