Edit Contrast

Name

Also known as (comma separated)

Brief definition Difference between visual elements.

Notes

Tier Core Useful Reference Deleted

Controls schema (JSON array) [ { "id": "pair", "type": "select", "label": "Text on paper", "default": "ink-paper", "options": [ "ink-paper", "gold-paper", "mint-paper" ] }, { "id": "largeText", "type": "toggle", "label": "Large text (18px bold+)", "default": false }, { "id": "radius", "type": "number", "label": "Corner radius", "default": 10, "min": 0, "max": 24, "step": 2 }, { "id": "sampleText", "type": "text", "label": "Sample text", "default": "The quick brown fox" } ]

Templates (JSON object keyed by format) { "html": "<div class=\"ct-wrap\" data-pair=\"{{pair}}\" role=\"img\" aria-label=\"A text sample against its background, with the measured WCAG contrast ratio and pass or fail stated as text\">\n <div class=\"ct-sample\" style=\"border-radius:{{radius}}px;font-size:{{#if largeText}}24px{{/if}}{{#unless largeText}}15px{{/unless}};font-weight:{{#if largeText}}700{{/if}}{{#unless largeText}}400{{/unless}};\">{{sampleText}}</div>\n <p class=\"ct-threshold\">Required for {{#if largeText}}large{{/if}}{{#unless largeText}}normal{{/unless}} text: {{#if largeText}}3.0{{/if}}{{#unless largeText}}4.5{{/unless}}:1</p>\n <p class=\"ct-verdict ct-verdict--ink-paper\">Measured ratio: 16.1:1 &mdash; PASS</p>\n <p class=\"ct-verdict ct-verdict--gold-paper\">Measured ratio: 2.1:1 &mdash; FAIL</p>\n <p class=\"ct-verdict ct-verdict--mint-paper\">Measured ratio: 1.3:1 &mdash; FAIL</p>\n</div>\n<style>\n.ct-wrap { font: 13px/1.4 system-ui, sans-serif; color: #241430; width: 300px; }\n.ct-sample { padding: 20px; text-align: center; box-sizing: border-box; background: #FAF7F2; border: 1.5px solid #24143022; }\n.ct-threshold { margin: 10px 0 0; font-size: 12px; color: #241430cc; }\n.ct-verdict { display: none; margin: 4px 0 0; font-size: 13px; font-weight: 700; }\n[data-pair=\"ink-paper\"] .ct-sample { color: #241430; }\n[data-pair=\"ink-paper\"] .ct-verdict--ink-paper { display: block; color: #1a7a3d; }\n[data-pair=\"gold-paper\"] .ct-sample { color: #E8A020; }\n[data-pair=\"gold-paper\"] .ct-verdict--gold-paper { display: block; color: #b3261e; }\n[data-pair=\"mint-paper\"] .ct-sample { color: #A8E6C1; }\n[data-pair=\"mint-paper\"] .ct-verdict--mint-paper { display: block; color: #b3261e; }\n</style>", "tailwind": "<div class=\"ct-tw font-sans text-[#241430] w-[300px]\" data-pair=\"{{pair}}\" role=\"img\" aria-label=\"A text sample against its background, with the measured WCAG contrast ratio and pass or fail stated as text\">\n <div class=\"ct-tw-sample p-5 text-center box-border bg-[#FAF7F2] border-[1.5px] border-[#24143022]\" style=\"border-radius:{{radius}}px;font-size:{{#if largeText}}24px{{/if}}{{#unless largeText}}15px{{/unless}};font-weight:{{#if largeText}}700{{/if}}{{#unless largeText}}400{{/unless}};\">{{sampleText}}</div>\n <p class=\"mt-2.5 text-xs text-[#241430]/80\">Required for {{#if largeText}}large{{/if}}{{#unless largeText}}normal{{/unless}} text: {{#if largeText}}3.0{{/if}}{{#unless largeText}}4.5{{/unless}}:1</p>\n <p class=\"ct-tw-verdict-ink hidden mt-1 text-sm font-bold text-[#1a7a3d]\">Measured ratio: 16.1:1 &mdash; PASS</p>\n <p class=\"ct-tw-verdict-gold hidden mt-1 text-sm font-bold text-[#b3261e]\">Measured ratio: 2.1:1 &mdash; FAIL</p>\n <p class=\"ct-tw-verdict-mint hidden mt-1 text-sm font-bold text-[#b3261e]\">Measured ratio: 1.3:1 &mdash; FAIL</p>\n</div>\n<style>\n.ct-tw[data-pair=\"ink-paper\"] .ct-tw-sample { color: #241430; }\n.ct-tw[data-pair=\"ink-paper\"] .ct-tw-verdict-ink { display: block; }\n.ct-tw[data-pair=\"gold-paper\"] .ct-tw-sample { color: #E8A020; }\n.ct-tw[data-pair=\"gold-paper\"] .ct-tw-verdict-gold { display: block; }\n.ct-tw[data-pair=\"mint-paper\"] .ct-tw-sample { color: #A8E6C1; }\n.ct-tw[data-pair=\"mint-paper\"] .ct-tw-verdict-mint { display: block; }\n</style>", "react": "export function Contrast({\n pair = \"{{pair}}\",\n largeText = {{largeText}},\n radius = {{radius}},\n sampleText = \"{{sampleText}}\",\n}) {\n const info = {\n \"ink-paper\": { color: \"#241430\", ratio: \"16.1:1\", pass: true },\n \"gold-paper\": { color: \"#E8A020\", ratio: \"2.1:1\", pass: false },\n \"mint-paper\": { color: \"#A8E6C1\", ratio: \"1.3:1\", pass: false },\n }[pair];\n return (\n <div style={{ font: \"13px/1.4 system-ui, sans-serif\", color: \"#241430\", width: 300 }}\n role=\"img\" aria-label=\"A text sample against its background, with the measured WCAG contrast ratio and pass or fail stated as text\">\n <div style={{ padding: 20, textAlign: \"center\", boxSizing: \"border-box\", background: \"#FAF7F2\", border: \"1.5px solid #24143022\",\n borderRadius: radius, color: info.color, fontSize: largeText ? 24 : 15, fontWeight: largeText ? 700 : 400 }}>\n {sampleText}\n </div>\n <p style={{ marginTop: 10, fontSize: 12, color: \"#241430cc\" }}>\n Required for {largeText ? \"large\" : \"normal\"} text: {largeText ? \"3.0\" : \"4.5\"}:1\n </p>\n <p style={{ marginTop: 4, fontSize: 13, fontWeight: 700, color: info.pass ? \"#1a7a3d\" : \"#b3261e\" }}>\n Measured ratio: {info.ratio} &mdash; {info.pass ? \"PASS\" : \"FAIL\"}\n </p>\n </div>\n );\n}" }