JSFiddle - React, Tailwind, and code Playground

HTML

<div id="main">

</div>

CSS

body{text-align:center;}
#main{
    padding:25px;
    font-family:verdana;
    display:inline-block;
    margin:auto;
}.testBack{
    width:400px;
    border:1px solid black;
    padding:10px;
    margin-bottom:10px;
    -webkit-box-shadow: 5px 5px 5px 0px rgba(128, 128, 128, 1);
    -moz-box-shadow: 5px 5px 5px 0px rgba(128, 128, 128, 1);
    box-shadow: 5px 5px 5px 0px rgba(128, 128, 128, 1);
    -webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
.testBack:nth-child(even){
    margin-left:15px;
}

JavaScript

$(function(){
    var colorCombos = [],
        smallest=255,
        biggest=0,
        biggesta=[],
        smallesta=[];
    for(var i=0;i<100;i++){
        var colors = [],
            sums = [0,0],
            ms = [.3,.59,.11],
            difference;
        for(var j=0;j<6;j++){
            var c = Math.floor(Math.random()*256);
            colors[j]=c;
            sums[Math.floor(j/3)]+=c*ms[j%3];
        }
        $.each(sums,function(i){
            if(this>biggest){
                biggest=this;
                biggesta=colors.slice(i*3,i*3+3)
            }
            if(this<smallest){
                smallest=this;
                smallesta=colors.slice(i*3,i*3+3)
            }
        });
        difference=Math.floor(Math.abs(sums[1]-sums[0]));
        colorCombos.push({
            background:colors.slice(0,3),
            text:colors.slice(3),
            difference:difference
        });
    }
    colorCombos.push({
        background:biggesta,
        text:smallesta,
        difference:Math.floor(biggest-smallest)
    });
    colorCombos.sort(function(a,b){
        return a.difference < b.difference?1:-1;
    });
    $.each(colorCombos,function(i,e){
        var txt=i==0?'Is this the most readable?':'Is this readable?';
        var div=$('<div/>').addClass('testBack');
        $(div).attr('style','background-color:rgb('+e.background[0]+','+e.background[1]+','+e.background[2]+')');
        $(div).append('<pre style=color:rgb('+e.text[0]+','+e.text[1]+','+e.text[2]+')">'+txt+'    difference:'+e.difference+'</pre>');
        $('#main').append(div);
    });
});
//brightness = (299*R + 587*G + 114*B) / 1000