Testing Component Contrast Ratio Threshold

HTML

<h2> Button with no border, background fill 3:1 with button text </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 3:1 Border with element background (3.3:1 border with page background)</label>
<input type="text" class="text3" id="ic">
<h2> Elements with 2.5:1 contrast ratio </h2>
<button class="button25"> Continue (2:5:1 button text with button color) </button>
<br />
<br/>
<button class="button25b"> Go to Next Page (border with page background) </button>
<br />
<br/>
<label for="fn">First Name</label>
<input type="text" class="text25" id="fn">
<h2> Elements with 2:1 contrast ratio </h2>
<button class="button21"> Continuex </button>
<br />
<br/>
<button class="button21b"> Back </button>
<br />
<br/>
<label for="fn">First Name</label>
<input type="text" class="text21" id="fn">
<hr />
<h2> Button with no border, background fill 3:1 with page background and button text</h2>
<button class="button10"> Submit </button>
<h2> Button with 3 px border 3:1 contrast with page background</h2>
<button class="button20"> Continue </button>
<h2> Select element, border 3 px contrast 3:1 </h2>
<select class="select10">
  <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 3 px border and 3:1 contrast with page background</h2>
<label for="fn">First Name</label>
<input type="text"...

CSS

h1,
h2 {
  font-family: arial;
}

body {
  background: #fff;
}

.button1 {
  background: #5C81F0;
  border: none;
  color: #F5E7E5;
}

.button2 {
  background: #fff;
  border: 1px solid #989494;
  /*gray*/
}

.select1 {
  border: 1px solid #989494 !important;
}

.text1 {
  border: 1px solid #989494 !important;
  width: 100px;
}

.text2 {
  border: 1px solid #7F93CF !important;
  width: 100px;
}

.text3 {
  background-color: #F3F5F6;
  border: 1px solid #B873D2 !important;
  width: 100px;
}


/*CSS for 2:5 contrast ratio*/

.button25 {
  background-color: #C08CAD;
  border: none;
  color: #F5Efff;
}

.button25b {
  background-color: #fff;
  border: 1px solid #C098C0;
}

.text25 {
  border: 1px solid #B7B7B9;
  width: 100px;
}


/* CSS for 2:1 contrast ration */

.button21 {
  border: 1px solid #B7B7B9;
}

.button21b {
  background-color: #F3F5F6;
  border: 1px solid #ADAFB5;
}

.text21 {
  border: 1px solid #B7B7B9;
  width: 100px;
}


/*   CSS for 3px border with 3:1 contrast  */

.button10 {
  background: #7D8DF5;
  border: none;
  color: #FFF;
}

.button20 {
  background: #fff;
  border: 3px solid #989494;
  /*gray*/
}

.select10 {
  border: 3px solid #989494 !important;
}

.text10 {
  border: 3px solid #989494 !important;
  width: 100px;
}

.text20 {
  border: 3px solid #7D8DF5 !important;
  width: 100px;
}

.text30 {
  background-color: ##F3F0FF;
  border: 3px solid #B870D2 !important;
  width: 100px;
}


/*CSS for 2.5 contrast ratio*/

.button250 {
  background-color: #C08CAD;
  border: none;
  color: #F5EDF2;
}

.button250b {
  background-color: #F3F5F6;
  border: 3px solid #C08CAD;
}

.text250 {
  border: 3px solid #908DDF;
  width: 100px;
}


/* CSS for 2:1 contrast with 3px border */

.button210 {
  background-color: #B7B7B9;
  border: none;
}

.button210b {
  background-color: #F3F5F6;
  border: 3px solid #ADAFB5;
}

.text210 {
  border: 3px solid #B7B7B9;
  width: 100px;
}

.text30 {
  background-color: #F3F5F6;
  border: 3px solid #B381D4;
  width:...