Consumer Digital
Links
In order to make text links clearly distinguishable from other copy, and be visible to people who have difficulty perceiving color differences, linked text should be indicated using both a different color, specifically green (#487127), and be underlined.
Since some disabled users rely on non-mouse navigation techniques, such as using keyboard navigation or assistive devices, linked text also requires differentiation on hover, or focus. The CareCredit website specifications uses a reversed hover effect for this purpose.
Further, the programming code for the link must also contain explicit descriptive information to explain the function of the link to people using web assistive tools, such as text-to-speech, voice recognition and others.
WCAG specifications for text links
The combined requirements to be WCAG 2.0 Level AA conformant, your page must have all of the following:
A 4.5:1 contrast between the non-link text color and the background.
A 4.5:1 contrast between the link text color and the background.
A 3:1 contrast between the link text color and the surrounding non-link text color.
For WCAG compliance, link descriptions must provide valuable, compelling, and specific initial details about each site feature or content option. (WCAG2 2.4.9)
Link Description Example: How CareCredit Works
In-Text
When a link is located in body copy the link text is set in #487127 with underline.
Example
For complete details, see the CareCredit account agreement within your application.
Single
When a link stands on it's own, it is bold by default and hover state adds an underline.
Example
Jump Link Examples
Jump links (i.e. links that move a user to a different part of the same page) have a consistent visual style, and buttons, that are distinct from page-to-page navigation links.
Example: Individual Procedure Pages
For complete details, see the CareCredit account agreement within your application.
CSS
.subnav ul li a {
display: inline-block;
color: #fff;
font-size: 1.125rem;
text-align: left;
width: 100%;
height:65px;
padding: 30px;
border-bottom: 15px solid rgb(0, 111, 96);
background-color: rgba(69, 69, 69,0.702);
background-image:url(/assets/core/images/new/arrow-down.png);
background-repeat:no-repeat;
background-position: 200px 38px;
}
