Color Contrast Survey

WebAim

Briana's Codepen

• Contrast: 4.31 Headline: Dark Slate Green (2F4F4F) on Dark Khaki (BDB76B)
• Contrast: 4.31 Email Link: Dark Slate Green (2F4F4F) on Dark Khaki (BDB76B)
• Contrast: 8.05 Section Headline: "Off Black" (1E1E1E) on Khaki (F0E68C)
• Contrast: 6.97 Text: Dark Slate Green (2F4F4F) on Khaki (F0E68C)
• Contrast: 1.74 Photo Description Text: Golden Rod (DAA520) on Khaki (F0E68C)

Result: The contrast beween the photo description text and background should be greater. The rest of the contrasting colors are sufficient.

Fiona's Codepen

• Contrast: 4.15 Headline: rgb(253, 246, 238) on rgb(105, 119, 156)
• Contrast: 3.12 Subheading: rgb(189, 222, 229) on rgb(105, 119, 156)
• Contrast: 1.7 About Me Section: rgb(225, 137, 115) on (105, 119, 156)
• Contrast: 3.23 Additional description text: rgb(67, 7, 102) on (105, 119, 156)

Result: The "About Me" section, subheading, and additional description text would benefit from higher contrast ratio.

Leslie's Codepen

• Contrast: 10.51 Headline: #2F2504 on #DAD7CD
• Contrast: 10.51 Email Link: #2F2504 on #DAD7CD
• Contrast: 3.98 Section Headline: #A3B18A on #344E41
• Contrast: 9 Text: #FFFFF0 on #344E41
• Contrast: 1.52 Section Heading: #556B2F on #344E41
• Contrast: 1.17 Links: #3A5A40 on #344E41

Result: The section heading and links would beneift from higher contrast ratio.