This site uses some features that might not be supported by your browser. Please consider using a more modern browser.
This site requires Javascript to work properly, sorry.

About

Close

Four Point Five is a tool to help developers make their websites and applications more accessible. It calculates the contrast ratio between two colours and tells you whether you meet the WCAG's AA criteria of a 4.5:1 contrast ratio.

Unlike many other similar tools, Four Point Five will then automatically calculate the nearest passing colour to use should you fail to meet the 4.5:1 benchmark.

This tool was built by me, Jonny Kates. I don't profess to be an expert in web accessibility but I believe it is of critical importance and often overlooked. I wanted a tool that would suggest the "nearest" passing colour but couldn't find one - so I built this.

You can view, contribute to or star the project on Github. It's a basic static site: one HTML file, one CSS file, one JS file. No build tools, no dependencies*, no nonsense. It comes in at about 43kb and is hosted on Netlify.

If you found this useful and would like to make me smile, you can buy me a coffee.

* I'm using pSBC.js by PimpTrikit to tint the shade of a failing colour towards a passing one.

About

fourpointfive.dev

A colour contrast tool
View on Github
2.41

Fail!

The contrast ratio between your selected colours is below the WCAG's 4.5:1 requirements for acceptable accessibility (AA compliance)

How about...

#13866f

If you darken your original foreground colour by 49%, you'd get #13866f which has a passing contrast ratio of...

4.50

This is an example of your original colours, which fail to meet WCAG AA criteria. You might think that this seems perfectly legible...

However web accessibility is about making sure as many people as possible can use your product. The colour contrast of this paragraph makes that so!