search

WestpacCXTeam / GUI-source

Westpac GUI source code
http://WestpacCXTeam.github.io/GUI-source
GNU General Public License v2.0
37 stars 19 forks source link

Contrast of form control borders #271

Closed renrez closed 5 years ago

renrez commented 8 years ago

Description

The colour of form control borders is quite weak in term of contrast, this applies specifically to text input elements, textarea elements and select list elements.

A quick fix could be changing the colour to the "Stone" style guide colour which has a contrast ratio of 3.98:1 which I expect would be sufficient in that the form controls are greater in height than 14pt which satisfy the 3:1 contrast ratio required for large text. Alternatively the GEL team may have another preferred solution.

Screenshots

forms_wbc_gui_-_2016-07-08_09 04 51

jonnystening commented 7 years ago

Where are we with this request @justinspencer?

jonnystening commented 6 years ago

Note: WCAG AA 2.1 spec alignment will require a more noticeable 3:1 contrast ratio between input element and background; be that between either element border or element background fill against background.

As per the spec:

The visual presentation of the following have a contrast ratio of at least 3:1 against adjacent color(s):

User Interface Components Visual information used to indicate states and boundaries of user interface components, except for inactive components or where the appearance of the component is determined by the user agent and not modified by the author; https://www.w3.org/TR/WCAG21/#non-text-contrast

jonnystening commented 5 years ago

This was fixed as part of WestpacCXTeam/GUI-source#433