Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Adjust ratio for opacity #222

Open
wants to merge 5 commits into
base: main
Choose a base branch
from
Open

Adjust ratio for opacity #222

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
9c239d7
Adjust ratio for opacity
jamesnw Dec 10, 2024
51feefe
Update src/lib/components/ratio/index.svelte
jamesnw Dec 11, 2024
2aee05d
Add checkerboard pattern to results bg
jamesnw Dec 11, 2024
50b00f9
Merge branch 'main' into alpha
jgerigmeyer Jan 16, 2025
bdf6fc1
review
jgerigmeyer Jan 16, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
18 changes: 18 additions & 0 deletions src/lib/components/ratio/ColorIssues.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -54,6 +54,24 @@
adjust the color to be in gamut.
</p>
</dd>
<dt>Background Color Alpha Values</dt>
<dd>
<p>
WCAG 2 contrast does not consider alpha values. Because we don't know
what is behind your background color, we can't estimate the contrast. If
the background color is not opaque, the contrast ratio is computed
without background or foreground opacity.
</p>
</dd>
<dt>Foreground Color Alpha Values</dt>
<dd>
<p>
WCAG 2 contrast does not consider alpha values, but we can approximate a
ratio by premultiplying a semi-transparent foreground color in the sRGB
space. In practice, the displayed foreground color may vary depending on
the display and browser.
</p>
</dd>
</dl>
</details>

Expand Down
26 changes: 23 additions & 3 deletions src/lib/components/ratio/index.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,15 +1,30 @@
<script lang="ts">
import { contrast } from 'colorjs.io/fn';
import { contrast, mix } from 'colorjs.io/fn';

import ColorIssues from '$lib/components/ratio/ColorIssues.svelte';
import Result from '$lib/components/ratio/Result.svelte';
import ExternalLink from '$lib/components/util/ExternalLink.svelte';
import Icon from '$lib/components/util/Icon.svelte';
import { RATIOS } from '$lib/constants';
import { bg, fg } from '$lib/stores';

let ratio = $derived(contrast($bg, $fg, 'WCAG21'));
let fgPremultiplied = $derived.by(() => {
if ($fg.alpha === 1 || $bg.alpha !== 1) return $fg;
return mix($bg, $fg, $fg.alpha, {
space: 'srgb',
premultiplied: false,
});
});
let ratio = $derived(contrast($bg, fgPremultiplied, 'WCAG21'));
let displayRatio = $derived(Math.round((ratio + Number.EPSILON) * 100) / 100);
let pass = $derived(ratio >= RATIOS.AA.Normal);
let alphaWarning = $derived.by(() => {
if ($bg.alpha !== 1)
return 'Alpha is not considered when the background is not opaque.';
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Could we link these two notes directly to the fuller description (expanding if necessary)?

If not that, we could consider adding the fuller explanation in a tooltip/dialog here instead of in the expandable "issues" section.

if ($fg.alpha !== 1)
return 'This ratio is our best estimate with transparency.';
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

"with transparency" seems a bit vague to me if users haven't read the full description. Maybe "given the specified foreground alpha value" or something?

return null;
});
</script>

<aside data-layout="results">
Expand All @@ -20,6 +35,9 @@
<span class="sr-only">The contrast ratio is</span>
<span class="result-ratio-number">{displayRatio}:1</span>
</h3>
{#if alphaWarning}
<p><Icon name="warning" />{alphaWarning}</p>
{/if}

<p class="result-intro">
In WCAG 2, contrast is a measure of the difference in perceived brightness
Expand Down Expand Up @@ -73,7 +91,9 @@
@use 'config';

[data-layout='results'] {
background-color: var(--bgcolor);
background: linear-gradient(90deg, var(--bgcolor), var(--bgcolor)),
url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 60 60"><rect fill="%23e8e8e8" width="30" height="30"/><rect x="30" y="30" width="30" height="30" fill="%23e8e8e8"/></svg>');
background-size: 30px 30px;
color: var(--fgcolor);
display: grid;
gap: var(--result-layout-gap, var(--shim));
Expand Down
Loading