| Type | Contrast Required | Description | Image |
|---|---|---|---|
| Transparent Submit Button with 3 CSS px border |
3 to 1 | Transparent submit button with a 3 CSS px blue border. The 3 CSS px blue border does provide a sufficient contrast that is equal to 3 to 1. 3 CSS px blue border line (#6699cc) against immediate surrounding color of white (#FFFFFF) has a contrast ratio of exactly 3 to 1. | |
| Light Grey Submit Button with 3 CSS px border |
3 to 1 | Light Grey (#EBEBEB) submit button with a 3 CSS px blue border. The 3 CSS px blue border does provide a sufficient contrast that is equal to 3 to 1. 3 CSS px blue border line (#6699CC) against immediate outer surrounding color of white (#FFFFFF) has a contrast ratio of exactly 3 to 1. The fact that the background of the submit button is a light grey (#EBEBEB) is irrelevant for testing the color contrast of the border line of the button, because this SC only requires the border line to contrast with the immediate outer color. | |
| Transparent Submit Button with 1 CSS px border |
4.5 to 1 | Transparent submit button with a 1 CSS px black border. The 1 CSS px black border provides sufficient contrast greater than 4.5 to 1. 1 CSS px black border line (#000000) against immediate surrounding color of white (#FFFFFF) has a contrast ratio of 21 to 1. | |
| Blue Submit Button with no border | 3 to 1 | Blue submit button with no border. The blue button provides sufficient contrast equal to 3 to 1. While there is no border, the solid area of the blue button easily meets the minimum 3 css px by 3 css px requirement to qualify as thick. The blue (#6699cc) button against the immediate surrounding color of white (#FFFFFF) has a contrast ratio of exactly 3 to 1. | |
| Transparent Submit Button with no border |
4.5 to 1 | Transparent submit button with a no border. There is no visual affordance indicating this is a button for any user. This SC does not require the visual affordance to exist, it just requires that if the essential visual affordance (non-text) does exist, that essential visual affordance is accessible to people with low vision too. Note: The proposed SC that does relate to the cognitive usability problem created with a button like this is Issue #36 Clear Controls |