wehub-resource-sync
dde272c4b8
i18n - Build Validation / Validate i18n Builds (24) (push) Has been cancelled
CI - Node.js / Lint (24) (push) Has been cancelled
CI - Node.js / Build (24) (push) Has been cancelled
CI - Node.js / Test (24) (push) Has been cancelled
CI - Node.js / Test - Upcoming Changes (24) (push) Has been cancelled
CI - Node.js / Test - i18n (italian, 24) (push) Has been cancelled
CI - Node.js / Test - i18n (portuguese, 24) (push) Has been cancelled
CD - Docker - GHCR Images / Build and Push Images (push) Has been cancelled
126 lines
3.4 KiB
Markdown
126 lines
3.4 KiB
Markdown
---
|
|
id: 6a22d77ddf034bc4e35b1d5b
|
|
title: "Challenge 354: Contrast Rating 3"
|
|
challengeType: 29
|
|
dashedName: challenge-354
|
|
---
|
|
|
|
# --description--
|
|
|
|
Given two arrays representing RGB values and a boolean indicating whether the text is large, return the WCAG contrast rating using the following method:
|
|
|
|
First, convert each RGB value to relative luminance:
|
|
|
|
- Divide each channel `[R, G, B]` by 255 to get a value between `0` and `1`
|
|
- Apply the gamma correction formula to each channel:
|
|
- If the channel value is less than or equal to `0.04045`: `channel / 12.92`
|
|
- Otherwise: `((channel + 0.055) / 1.055) ^ 2.4`
|
|
- Calculate luminance: `0.2126 * R + 0.7152 * G + 0.0722 * B`
|
|
|
|
Then, calculate the contrast ratio by adding 0.05 to each luminance value, then dividing the lighter one by the darker one. The lighter one will always be the first argument.
|
|
|
|
Return the rating based on the contrast ratio using the following table:
|
|
|
|
| Rating | Normal Text | Large Text |
|
|
|--------|-------------|------------|
|
|
| `"AAA"` | 7.0+ | 4.5+ |
|
|
| `"AA"` | 4.5+ | 3.0+ |
|
|
| `"Fail"` | below 4.5 | below 3.0 |
|
|
|
|
# --hints--
|
|
|
|
`get_contrast_rating([255, 255, 255], [0, 0, 0], False)` should return `"AAA"`.
|
|
|
|
```js
|
|
({test: () => { runPython(`
|
|
from unittest import TestCase
|
|
TestCase().assertEqual(get_contrast_rating([255, 255, 255], [0, 0, 0], False), "AAA")`)
|
|
}})
|
|
```
|
|
|
|
`get_contrast_rating([215, 188, 188], [55, 55, 55], False)` should return `"AA"`.
|
|
|
|
```js
|
|
({test: () => { runPython(`
|
|
from unittest import TestCase
|
|
TestCase().assertEqual(get_contrast_rating([215, 188, 188], [55, 55, 55], False), "AA")`)
|
|
}})
|
|
```
|
|
|
|
`get_contrast_rating([143, 144, 210], [46, 47, 61], False)` should return `"Fail"`.
|
|
|
|
```js
|
|
({test: () => { runPython(`
|
|
from unittest import TestCase
|
|
TestCase().assertEqual(get_contrast_rating([143, 144, 210], [46, 47, 61], False), "Fail")`)
|
|
}})
|
|
```
|
|
|
|
`get_contrast_rating([167, 167, 210], [53, 10, 53], True)` should return `"AAA"`.
|
|
|
|
```js
|
|
({test: () => { runPython(`
|
|
from unittest import TestCase
|
|
TestCase().assertEqual(get_contrast_rating([167, 167, 210], [53, 10, 53], True), "AAA")`)
|
|
}})
|
|
```
|
|
|
|
`get_contrast_rating([135, 147, 155], [60, 70, 90], True)` should return `"AA"`.
|
|
|
|
```js
|
|
({test: () => { runPython(`
|
|
from unittest import TestCase
|
|
TestCase().assertEqual(get_contrast_rating([135, 147, 155], [60, 70, 90], True), "AA")`)
|
|
}})
|
|
```
|
|
|
|
`get_contrast_rating([125, 210, 195], [105, 130, 90], True)` should return `"Fail"`.
|
|
|
|
```js
|
|
({test: () => { runPython(`
|
|
from unittest import TestCase
|
|
TestCase().assertEqual(get_contrast_rating([125, 210, 195], [105, 130, 90], True), "Fail")`)
|
|
}})
|
|
```
|
|
|
|
# --seed--
|
|
|
|
## --seed-contents--
|
|
|
|
```py
|
|
def get_contrast_rating(rgb1, rgb2, is_large_text):
|
|
|
|
return rgb1
|
|
```
|
|
|
|
# --solutions--
|
|
|
|
```py
|
|
def get_contrast_rating(rgb1, rgb2, is_large_text):
|
|
def to_luminance(rgb):
|
|
channels = []
|
|
for c in rgb:
|
|
c = c / 255
|
|
if c <= 0.04045:
|
|
channels.append(c / 12.92)
|
|
else:
|
|
channels.append(((c + 0.055) / 1.055) ** 2.4)
|
|
return 0.2126 * channels[0] + 0.7152 * channels[1] + 0.0722 * channels[2]
|
|
|
|
l1 = to_luminance(rgb1)
|
|
l2 = to_luminance(rgb2)
|
|
ratio = (l1 + 0.05) / (l2 + 0.05)
|
|
|
|
if is_large_text:
|
|
if ratio >= 4.5:
|
|
return "AAA"
|
|
if ratio >= 3.0:
|
|
return "AA"
|
|
else:
|
|
if ratio >= 7.0:
|
|
return "AAA"
|
|
if ratio >= 4.5:
|
|
return "AA"
|
|
return "Fail"
|
|
```
|