public/uni
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

add contrast-levels demo, wave-tab-order image, link a11y tools, mark axe as paid/pro

Browse Source
This commit is contained in:
Michael Czechowski
2026-04-20 18:22:42 +02:00
parent bd5d7f0028
commit 72b7d51af9
6 changed files with 147 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

97
slides/223015c/assets/demos/contrast-levels.html Normal file
View File

@@ -0,0 +1,97 @@
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<title>Kontrast-Stufen</title>
<style>
body { font-family: system-ui, sans-serif; padding: 1.2rem; margin: 0; }
.row {
background: #fff;
padding: 14px 16px;
margin-bottom: 10px;
border-radius: 6px;
border: 1px solid #e5e7eb;
display: flex;
align-items: center;
justify-content: space-between;
gap: 14px;
}
.sample {
font-size: 1.2rem;
font-weight: 600;
flex: 1;
}
.meta {
text-align: right;
font-size: 0.85rem;
white-space: nowrap;
}
.ratio {
font-family: ui-monospace, monospace;
font-weight: 700;
font-size: 0.95rem;
color: #1a1a2e;
}
.badge {
display: inline-block;
padding: 2px 8px;
border-radius: 3px;
font-size: 0.7rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.05em;
margin-top: 4px;
}
.fail { background: #fee2e2; color: #991b1b; }
.aa-large { background: #fed7aa; color: #7c2d12; }
.aa { background: #dcfce7; color: #166534; }
.aaa { background: #bbf7d0; color: #14532d; }
.hint {
margin-top: 14px;
font-size: 0.78rem;
color: #6b7280;
font-style: italic;
text-align: right;
}
.hint a { color: #d63384; }
</style>
</head>
<body>
<div class="row" style="background: #fff;">
<div class="sample" style="color: #aaaaaa;">Barrierefrei lesen</div>
<div class="meta">
<div class="ratio">2.3:1</div>
<span class="badge fail">✗ Fail</span>
</div>
</div>
<div class="row" style="background: #fff;">
<div class="sample" style="color: #949494;">Barrierefrei lesen</div>
<div class="meta">
<div class="ratio">3:1</div>
<span class="badge aa-large">AA Large</span>
</div>
</div>
<div class="row" style="background: #fff;">
<div class="sample" style="color: #767676;">Barrierefrei lesen</div>
<div class="meta">
<div class="ratio">4.5:1</div>
<span class="badge aa">✓ AA</span>
</div>
</div>
<div class="row" style="background: #fff;">
<div class="sample" style="color: #595959;">Barrierefrei lesen</div>
<div class="meta">
<div class="ratio">7:1</div>
<span class="badge aaa">✓ AAA</span>
</div>
</div>
<div class="row" style="background: #fff;">
<div class="sample" style="color: #1a1a1a;">Barrierefrei lesen</div>
<div class="meta">
<div class="ratio">16:1</div>
<span class="badge aaa">✓ AAA+</span>
</div>
</div>
<div class="hint">Check: webaim.org/resources/contrastchecker</div>
</body>
</html>