WCAG 2.0 color contrast – How strict do you need to follow?

I have some buttons with a purple background and I am trying to set the text color so it is in compliance of the WCAG 2.0 color contrast rules.

My issue is that I just don't understand how based on the rules, that black text is better on the purple than white. I have asked several people to get their opinion and everyone agrees, the white text is better, yet based on color contrast checkers the better ratio is with black text.

An example of the buttons I have are on this JSFiddle: http://jsfiddle.net/mq58jwfb/5/

How strict should I follow the WCAG? I know this is to allow better visiblity for those with vision problems, but if it makes it worse for the majority of users (although subjectively), should I still follow the WCAG despite what looks easier to read?