René's URL Explorer Experiment


Title: ButtonBuddy - Accessible button contrast generator

Open Graph Title: ButtonBuddy - Accessible button contrast generator

X Title: ButtonBuddy - Accessible button contrast generator

Description: Learn what it takes to ensure your buttons or button-styled links have accessible contrast across all states and surfaces, then use the generator to check and adjust your button palette.

Open Graph Description: Learn what it takes to ensure your buttons or button-styled links have accessible contrast across all states and surfaces, then use the generator to check and adjust your button palette.

X Description: Learn what it takes to ensure your buttons or button-styled links have accessible contrast across all states and surfaces, then use the generator to check and adjust your button palette.

direct link

Domain: buttonbuddy.dev

twitter:cardsummary_large_image
twitter:creator@5t3ph
og:imagehttps://buttonbuddy.dev/preview.png
twitter:imagehttps://buttonbuddy.dev/preview.png

Links:

5t3phhttps://twitter.com/5t3ph
Introhttps://buttonbuddy.dev#intro
Generatorhttps://buttonbuddy.dev#generator
Abouthttps://buttonbuddy.dev#about
skip to the generatorhttps://buttonbuddy.dev#generator
Web Content Accessibility Guidelines (WCAG)https://www.w3.org/WAI/standards-guidelines/wcag/
accessible contrasthttps://www.w3.org/TR/2008/REC-WCAG20-20081211/#visual-audio-contrast
user interface componentshttps://www.w3.org/WAI/WCAG21/Understanding/non-text-contrast.html
learn the differencehttps://marcysutton.com/links-vs-buttons-in-modern-web-applications
Check out this diagram >https://twitter.com/5t3ph/status/1340367293440696321/photo/1
ButtonBuddy generatorhttps://buttonbuddy.dev#generator
Review the upcoming WCAG 2.2 draft success criteria for focushttps://www.w3.org/WAI/WCAG22/Understanding/focus-appearance-minimum.html
Full guide to button stylinghttps://moderncss.dev/css-button-styling-guide/
File an issue on GitHubhttps://github.com/5t3ph/buttonbuddy/issues
@5t3phhttps://twitter.com/5t3ph
ModernCSS.devhttps://moderncss.dev
StyleStage.devhttps://stylestage.dev
11ty.Rockshttps://11ty.rocks
LearnFromSteph.devhttps://learnfromsteph.dev
egghead video front-end lessonshttps://5t3ph.dev/egghead
Support this projecthttps://www.buymeacoffee.com/moderncss
Star on GitHubhttps://github.com/5t3ph/buttonbuddy
color-contrast packagehttps://www.npmjs.com/package/color-contrast
eleventy-parcelhttps://github.com/mbarker84/eleventy-parcel
Stephanie Eckleshttps://twitter.com/5t3ph

Viewport: width=device-width, initial-scale=1.0

URLs of crawlers that visited me.