| Type | Contrast Required | Description | Example |
|---|---|---|---|
| Text Input w Thick 3 CSS px border stroke |
3 to 1 | Text Input with a 3 CSS px border. The 3 CSS px blue outline does provide a sufficient contrast that is equal to 3 to 1. 3 CSS px blue border line (#6699cc) against the immediate surrounding color of white (#FFFFFF) has a contrast ratio of exactly 3 to 1. | |
| Text Input w Thick 3 CSS px border stroke on bottom only |
3 to 1 | Text Input with a 3 CSS px border on bottom. The 3 CSS px blue bottom border does provide a sufficient contrast that is equal to 3 to 1. 3 CSS px blue border line (#6699cc) against the immediate surrounding color of white (#FFFFFF) has a contrast ratio of exactly 3 to 1. | |
| Text Input w Thin 1 CSS px border stroke |
4.5 to 1 | Text Input with a 1 CSS px border. The 1 CSS px black outline provides sufficient contrast greater than 4.5 to 1. 1 CSS px black line (#000000) against the immediate surrounding color of white (#FFFFFF) has a contrast ratio of 21 to 1. | |
| Text Input w Thin 1 CSS px border stroke on bottom only |
4.5 to 1 | Text Input with a 1 CSS px border on bottom. The 1 CSS px black bottom border does provide a sufficient contrast that is greater than 4.5 to 1. 1 CSS px black border line (#000000) against the immediate surrounding color of white (#FFFFFF) has a contrast ratio of 21 to 1. | |
| Text Input with no border | 3 to 1 | Text Input with no border. The white background of the text input does provide sufficient contrast that is equal to 3 to 1. While there is no border, the solid area of the white text input easily meets the minimum 3 css px by 3 css px requirement to qualify as thick. The white (#FFFFFF) text input against the immediate surrounding color of blue(#6699cc) has a contrast ratio of exactly 3 to 1. |