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 10 commits into
base: main
Choose a base branch
from
+79 −13
Open

Adjust ratio for opacity #222

Show file tree
Hide file tree
Changes from 5 commits
Commits
Show all changes
10 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
d4dccb8
adjust placement of alpha warnings
dvdherron Jan 23, 2025
bf7d3eb
add styles for warning message
dvdherron Jan 24, 2025
2df32d4
cleanup warning spacing at medium widths
dvdherron Jan 27, 2025
4e9be03
remove top margin for result-status
dvdherron Jan 27, 2025
55e5b88
Update src/lib/components/ratio/index.svelte
jamesnw Jan 27, 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.

Copy link
Contributor Author

Choose a reason for hiding this comment

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

I think linking will be much easier once we're done with #223. I'm fine with moving it to a tooltip/dialog, but note we'd need to develop that pattern. I'll defer to @SondraE on what we should do.

Copy link
Contributor

Choose a reason for hiding this comment

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

Ok, would it make more sense for me to focus on cleaning up #223 in the meantime @jamesnw? That PR just needs style cleanup, right?

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Correct- that would be great!

if ($fg.alpha !== 1)
return 'This ratio is our best estimate with transparency.';
jamesnw marked this conversation as resolved.
Show resolved Hide resolved
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