Testing Component Contrast Ratio Threshold

HTML

<h2>
Button with no border, background fill 3:1
</h2>
<button class="button1">
Submit
</button>
<h2>
Button with 1 px border 3:1 contrast
</h2>
<button class="button2">
 Continue
</button>
<h2>
Select element, border 1 px contrast 3:1
</h2>
<select class="select1">
<option value="Choose">Choose</option>
  <option value="Dog">Dog</option>
  <option value="Cat">Cat</option>
  <option value="Bird">Bird</option>
</select>
<h2>
Text field with 1 px border and 3:1 contrast
</h2>
<label for="fn">First Name</label>
<input type="text" class="text1" id="fn">
<br/>
<label for="ln">Last Name</label>
<input type="text" class="text2" id="ln">
<br/>
<label for="ic">Favorite Ice Cream</label>
<input type="text" class="text3" id="ic">
<h2>
Elements with 2.5:1 contrast ratio
</h2>
<button class="button25">
Continue
</button>
<br/>
<button class="button25b">
Go to Next Page
</button>
<br/>
<label for="fn">First Name</label>
<input type="text" class="text25" id="fn">
<h2>
Elements with 2:1 contrast ratio
</h2>
<button class="button20">
Continue
</button>
<br/>
<button class="button20b">
Back
</button>
<br/>
<label for="fn">First Name</label>
<input type="text" class="text20" id="fn">

CSS

h1, h2 {
  font-family: arial;
}
.button1 {
  background: #5C81F0;
  border: none;
  color: #F5EDF2;
}
.button2 {
  background-color: #F3F5F6;
  border: 1px solid #86888D;/*gray*/
}
.select1 {
  border: 1px solid #86888D !important;
}
.text1 {
  background-color: #F3F5F6;
  border: 1px solid #86888D !important;
  width: 100px;
}
.text2 {
  background-color: #F3F5F6;
   border: 1px solid #7988B5 !important;
  width: 100px;
}
.text3 {
  background-color: #F3F5F6;
   border: 1px solid #B870D2 !important;
  width: 100px;
}
/*CSS for 2.5 contrast ratio*/
.button25 {
  background-color: #C08CAD;
  border: none;
  color: #F5EDF2;
}
.button25b {
  background-color: #F3F5F6;
  border: 1px solid #C08CAD;
}
.text25 {
  background-color: #F3F5F6;
  border: 1px solid #ADAFB5;
  width: 100px;
  }
.button20 {
  background-color: #ADAFB5;
  border: none;
}
.button20b {
  background-color: #F3F5F6;
  border: 1px solid #ADAFB5;
}
.text20 {
  background-color: #F3F5F6;
  border: 1px solid #ADAFB5;
  width: 100px;
}