Low text contrast for Button

[oyvind-stenhaug]

Looking at https://www.sanity.io/ui/docs/primitive/button, the contrast ratio between text and background color for the "Publish" button does not seem high enough to meet WCAG 2.0 criterion 1.4.3, i.e. at least 4.5:1 (with default browser settings the text has font-weight: normal and font-size: 19px, so it doesn't count as "Large" text).

• tone="primary" (#ffffff on #2276fc): 4.15:1
• tone="default" (#ffffff on #8690a0): 3.22:1
• tone="brand": same as default
• tone="positive" (#ffffff on #3ab564): 2.63:1
• tone="caution" (#ffffff on #b7991e): 2.76:1
• tone="critical" (#ffffff on #f03e2f): 3.86:1

With mode="ghost" it's mostly above 4.5:1, except

• tone="positive" in the hover state (3.81:1)
• tone="caution" in the hover state (3.96:1)

(With mode="bleed", the contrast ratio looks to be high enough for all variations tested!)

Contrast ratio was calculated using https://webaim.org/resources/contrastchecker/.

[mariuslundgard]

Thank you for reporting @oyvind-stenhaug 🙏 This is probably the main aspect lacking in terms of accessibility of the default theme in @sanity/ui.

Fwiw, there‘s currently work being done to remedy this discrepancy on feature/improve-colors.

https://sanity-ui-workshop-il5ybwl8t.sanity.build/color/overview