... ormai prolifera AI-(!), e qui all'improvviso si son viste diverse proposte....
.. magari attendi qualche suggerimento da quelli che ne fanno uso...

... io invece sono rimasto fedele alla mia esclusiva prima invenzione di 15 anni fa, quando di altocontrasto non si è mai visto niente di niente sino a 2-3 mesi fa...
... per siti congrui per tale scopo il mio codice aveva soddisfatto decine di utenti in tempi passati...
... se per caso ti interessasse e vorresti provarlo, avvisami che ti posto il mio codice, (a parte che potresti trovarlo nel forum),  e che per applicarlo basterebbe fare un solo click (copia/incolla)...
... per curiosità ho fatto una simulazione su un tuo LINK che avevi postato recentemente, con questo risultato (logo(!) a parte da rivedere):
..

.

ciao

.

@KolAsim sei un mito,

sei indispensabile come l'acqua!!!

Grazie, anche per la versione applicata sul mio sito.

Però l'idea di fare uso dello sfondo bianco/nero e del font colore nero/bianco pensavo di usarlo per un mio nuovo sito diverso da quello in rete, che tu gentilmente hai usato.

Si provo a cercare se trovo il tuo codice, in alternativa ti romperò nuovamente le scatole.

@KolAsim grazieeee

ciao

... magarti questo tuo nuovo sito è congruo per il mio codice; ...puoi provarlo così te ne puoi rendere conto:

<script>
/** --- altocontrasto by KolAsim --- **/
$(document).ready(function () {/*K>*/ const ritardoK = 3; setTimeout(function () {/*K2>*/ const styleK = ` <style> #imStickyBarContainer { display: none !important; } #cacK { position: fixed; top: 0; left: 0; z-index: 1000000; border-radius: 50px; } #cacK2 { width: 72px; margin: auto; border-radius: 50px; border: 4px solid gray; background-color: beige !important; } #contrastoK, #reloadK { position: relative; width: 30px; border-radius: 50%; border: 2px solid silver; background-color: lavender !important; cursor: pointer; } #contrastoK:hover, #reloadK:hover { border-color: green; } </style> `; $("head").append(styleK); const altocontrastoK = ` <div id="cacK"> <div id="cacK2"> <img id="contrastoK" src="https://www.svgrepo.com/show/436702/circle-lefthalf-fill.svg" title="Contrasto: nero ◑ bianco"> <img id="reloadK" src="https://www.svgrepo.com/show/495633/refresh-circle.svg" title="Ripristina"> </div> </div> `; $("body").append(altocontrastoK); let contrastoAttivo = false; $("#contrastoK").on("click", function () {/*K3>*/ contrastoAttivo = !contrastoAttivo; const bgColor = contrastoAttivo ? "black" : "white"; const textColor = contrastoAttivo ? "white" : "black"; $("body *") .not("#cacK, #cacK *") .css({ "background-color": bgColor, "color": textColor }); });/*K3<<*/ $("#contrastoK").hover( function () {/*K4>*/ $(this).attr("src", "https://www.svgrepo.com/show/436703/circle-righthalf-fill.svg"); }, function () { $(this).attr("src", "https://www.svgrepo.com/show/436702/circle-lefthalf-fill.svg"); } );/*K4<<*/ $("#reloadK").hover( function () {/*K5>*/ $(this).attr("src", "https://www.svgrepo.com/show/495638/repeat-circle.svg"); }, function () { $(this).attr("src", "https://www.svgrepo.com/show/495633/refresh-circle.svg"); } );/*K5<<*/ $("#reloadK").on("click", function () {/*K6>*/ location.reload(); });/*K6<<*/ }, ritardoK * 1000);/*K2<<*/ });/*K<<*/
</script>

ciao

.

... il codice lo devi incollare in questa sezione:

>> Passo 1 - Impostazioni > Statistiche e Codice > I comandi della Sezione Codice >

▪Codice personalizzato: >  Prima della chiusura del tag HEAD

.

@KolAsim grazie, grazie, grazie.

Se non esistessi dovrebbero inventarti!!!!

Posso abusare ancora della tua cortesia infinita e chiderti come faccio a mettere il pulsante b/n a sx con dei margini superioi.

Scusami per lo sfruttamento delle tue abilità.

ciaooo

margini a sx e in alto del pulsante

...nel codice all'inizio, nella variabile styleK trovi questa stringa:
#cacK { position: fixed; top: 0; left: 0; ...eccetera...
... se modifichi così, sposti in basso di 100 pixel e di lato di 100pixel...
#cacK { position: fixed; top: 100px; left: 100px;

… se intendi altro, avvisami...

...

...(... potrebbe interessarti intgrare due pulsantini in più per aumentare/diminuire la misure dei font (entro certi limiti, che all'inizio dei tempi facevano parte dello stesso mio codice...)...

.

ciao

.

@KolAsim che dire grazie!

Cero che mi interessa e caspita, assolutamente si.

E per spostare tutto a sx il pulsante che valori devo mettere?

Grazie mille

ciaoooo

... se ho capito:

left: 0px;  ... ... posiziona a filo del bordo sinistro della pagina...

left: -10px;  ... ... posiziona 5 pixel fuori del bordo sinistro della pagina...

... se riesci a postare un esempio online si potrebbe fare una valutazione...

.

ciao

.

... si tratterebbe di questo, che si attiva e disattiva sull'omino giallo:

... se può andare, avvisami che ti passo iol codice...

.

ciao

.

@KolAsim scusami, scusami continuo a scrivere a sx invece volevo dire dx, perdonami ho la testa vuota,

2 informazioni:

1. posso dividere in 2 i pulsanti? quello b/n e quello +/- ?

2. posso tenerli fissi in alto e non come sticky?

Che dire @KoAsim, grazieee

ciaoooo

... dove detto prima, al posto di  left: 0px,   ...metti   right: 0px;   ... e vedrai così:

.

... se vuoi che scorra con la pagina, dove vedi #cacK { position: fixed; ... metti:

#cacK { position: absolute;

.

ciao

.

@KolAsim ancora grazie

squando puoi, per cortesia mi metti anche il codice +/- per il font

grazie ancora

ciaooo

... intanto che c'ero, ho preso spunto dallo STAMP per il font, e si potrebbe avere un aspetto a destra meno invasivo, se ho capito quello che cercavi, come in questa simulazione:

.

... eccolo; ...provalo, ...e per eventuali chiarimenti ci sentiremo domani in giornata ... ciao

<script>
/** -- altocontrasto plus by KolAsim -- **/
$(document).ready(function () {/*K>*/ const maxfsK = 46; const minfsK = 18; const fsK = 6; const ritardoK = 3; let font_sizeK = minfsK; let line_heightK = font_sizeK + 2; let nK = 1; setTimeout(function () {/*K1>*/ const styleK = ` <style> #cacK { display:none; position: fixed; top: 10px; left: 50px; width: 200px !important; height: auto !important; border-radius: 50px !important; border: solid 4px Gray !important; background-color: Beige !important; text-align: center !important; z-index: 1000000; } #contrastoK, #reloadK, #piuK, #menoK { position: relative; width: 20% !important; border-radius: 50% !important; border: solid 2px silver; background-color: lavender !important; cursor: pointer; } #contrastoK:hover, #reloadK:hover, #piuK:hover, #menoK:hover { border: solid 2px Green; } </style>`; $("head").append(styleK); const altocontrastoK = ` <div id = "ominoK" style = "position:fixed;top:10px;left:10px;z-index:1000000;width:50px;height:50px;background-color:yellow;border:solid 1px yellow;border-radius:50%;cursor:pointer" title="alto-contrasto"> <img id = "si" style = "position:absolute" src="https://www.svgrepo.com/show/535118/accessibility.svg" onclick="$(this).css(\'opacity\',0.5);$(\'#no\').show();$(\'#cacK\').show() " width="50" height="50" > <img id = "no" style = "position:absolute;display:none" src="https://www.svgrepo.com/show/313122/close.svg" onclick="$(this).hide();$(\'#si\').css(\'opacity\',1);;$(\'#cacK\').hide()" width="50" height="50" > </div> <div id="cacK"> <img id="contrastoK" src="https://www.svgrepo.com/show/436702/circle-lefthalf-fill.svg" title="high contrast\nblack ◑ white"> <img id="piuK" src="https://www.svgrepo.com/show/459979/increase-circle.svg" title="More A(+)"> <img id="menoK" src="https://www.svgrepo.com/show/459914/decrease-circle.svg" title="Less A(-)"> <img id="reloadK" src="https://www.svgrepo.com/show/495633/refresh-circle.svg" onclick="location.reload()" title="Reset to default"> </div>`; $("body").append(altocontrastoK); $("#contrastoK").click(function () {/*K2>*/ const elements = $("body *:not(#cacK,#ominoK,#ominoK *)"); if (nK !== 1) { elements.css({ backgroundColor: "white", color: "black", fontSize: font_sizeK, lineHeight: line_heightK + "px" }); $(".text-inner:not(#cacK), .text-inner *:not(#cacK)").css("height", "auto"); nK = 1; } else { elements.css({ backgroundColor: "black", color: "white", fontSize: font_sizeK, lineHeight: line_heightK + "px" }); $(".text-inner, .text-inner *").css("height", "auto"); nK = 2; } });/*K2<<*/ $("#contrastoK").hover(/*K3>*/ function () { $(this).attr("src", "https://www.svgrepo.com/show/436703/circle-righthalf-fill.svg"); }, function () { $(this).attr("src", "https://www.svgrepo.com/show/436702/circle-lefthalf-fill.svg"); } );/*K3<<*/ $("#reloadK").hover(/*K4>*/ function () { $(this).attr("src", "https://www.svgrepo.com/show/495638/repeat-circle.svg"); }, function () { $(this).attr("src", "https://www.svgrepo.com/show/495633/refresh-circle.svg"); } );/*4<<*/ $("#piuK").click(piuK); $("#menoK").click(menoK); }, ritardoK * 1000);/*K1<<*/ function piuK() {/*K5>*/ if (font_sizeK < maxfsK) {/*K6>*/ font_sizeK += fsK; line_heightK = font_sizeK + 2; aggiornaFont(); $("#menoK").css({ opacity: 1, cursor: "pointer" }); } else { $("#piuK").css({ opacity: 0.2, cursor: "not-allowed" }); }/*K6<<*/ }/*K5<<*/ function menoK() {/*K7>*/ if (font_sizeK > minfsK) {/*K8>*/ font_sizeK -= fsK; line_heightK = font_sizeK + 2; aggiornaFont(); $("#piuK").css({ opacity: 1, cursor: "pointer" }); } else { $("#menoK").css({ opacity: 0.2, cursor: "not-allowed" }); }/*K8<<*/ }/*K7<<*/ function aggiornaFont() {/*K9>*/ $("body *:not(#cacK, #cacK *)").css({ fontSize: font_sizeK, lineHeight: line_heightK + "px" }); }/*K9<<*/ });/*K<<*/
</script>

.

@KolAsim grazie di questo fantastico codice sto provando a inserirlo nel nuovo sito e funziona, 

ti chiedo una piccola modifica come vedi nello screen vorrei eliminare la croce sopra l'omino.

grazie

ciaoooo

@KolAsim ci sono riuscita,

ma non benissimo e quindi aiuto..

vedi rimane un quadrato intorno uff

ciaooo

... per fare qualcosa di semplice senza intervenire nel codice di controllo associato all'oggetto aggiungi alla fine della variabile styleK   prima della sua chiusura </style>`;  questa stringa:
#no {opacity:0}
... praticamente così:
#no {opacity:0} </style>`; 

... it ripropongo comunque lo stesso precedente codice con incorporata questa modifica:

<script>
/** -- altocontrasto plus by KolAsim -- **/
$(document).ready(function () {/*K>*/ const maxfsK = 46; const minfsK = 18; const fsK = 6; const ritardoK = 3; let font_sizeK = minfsK; let line_heightK = font_sizeK + 2; let nK = 1; setTimeout(function () {/*K1>*/ const styleK = ` <style> #cacK { display:none; position: fixed; top: 10px; left: 50px; width: 200px !important; height: auto !important; border-radius: 50px !important; border: solid 4px Gray !important; background-color: Beige !important; text-align: center !important; z-index: 1000000; } #contrastoK, #reloadK, #piuK, #menoK { position: relative; width: 20% !important; border-radius: 50% !important; border: solid 2px silver; background-color: lavender !important; cursor: pointer; } #contrastoK:hover, #reloadK:hover, #piuK:hover, #menoK:hover { border: solid 2px Green; } #no {opacity:0}</style>`; $("head").append(styleK); const altocontrastoK = ` <div id = "ominoK" style = "position:fixed;top:10px;left:10px;z-index:1000000;width:50px;height:50px;background-color:yellow;border:solid 1px yellow;border-radius:50%;cursor:pointer" title="alto-contrasto"> <img id = "si" style = "position:absolute" src="https://www.svgrepo.com/show/535118/accessibility.svg" onclick="$(this).css(\'opacity\',0.5);$(\'#no\').show();$(\'#cacK\').show() " width="50" height="50" > <img id = "no" style = "position:absolute;display:none" src="https://www.svgrepo.com/show/313122/close.svg" onclick="$(this).hide();$(\'#si\').css(\'opacity\',1);;$(\'#cacK\').hide()" width="50" height="50" > </div> <div id="cacK"> <img id="contrastoK" src="https://www.svgrepo.com/show/436702/circle-lefthalf-fill.svg" title="high contrast\nblack ◑ white"> <img id="piuK" src="https://www.svgrepo.com/show/459979/increase-circle.svg" title="More A(+)"> <img id="menoK" src="https://www.svgrepo.com/show/459914/decrease-circle.svg" title="Less A(-)"> <img id="reloadK" src="https://www.svgrepo.com/show/495633/refresh-circle.svg" onclick="location.reload()" title="Reset to default"> </div>`; $("body").append(altocontrastoK); $("#contrastoK").click(function () {/*K2>*/ const elements = $("body *:not(#cacK,#ominoK,#ominoK *)"); if (nK !== 1) { elements.css({ backgroundColor: "white", color: "black", fontSize: font_sizeK, lineHeight: line_heightK + "px" }); $(".text-inner:not(#cacK), .text-inner *:not(#cacK)").css("height", "auto"); nK = 1; } else { elements.css({ backgroundColor: "black", color: "white", fontSize: font_sizeK, lineHeight: line_heightK + "px" }); $(".text-inner, .text-inner *").css("height", "auto"); nK = 2; } });/*K2<<*/ $("#contrastoK").hover(/*K3>*/ function () { $(this).attr("src", "https://www.svgrepo.com/show/436703/circle-righthalf-fill.svg"); }, function () { $(this).attr("src", "https://www.svgrepo.com/show/436702/circle-lefthalf-fill.svg"); } );/*K3<<*/ $("#reloadK").hover(/*K4>*/ function () { $(this).attr("src", "https://www.svgrepo.com/show/495638/repeat-circle.svg"); }, function () { $(this).attr("src", "https://www.svgrepo.com/show/495633/refresh-circle.svg"); } );/*4<<*/ $("#piuK").click(piuK); $("#menoK").click(menoK); }, ritardoK * 1000);/*K1<<*/ function piuK() {/*K5>*/ if (font_sizeK < maxfsK) {/*K6>*/ font_sizeK += fsK; line_heightK = font_sizeK + 2; aggiornaFont(); $("#menoK").css({ opacity: 1, cursor: "pointer" }); } else { $("#piuK").css({ opacity: 0.2, cursor: "not-allowed" }); }/*K6<<*/ }/*K5<<*/ function menoK() {/*K7>*/ if (font_sizeK > minfsK) {/*K8>*/ font_sizeK -= fsK; line_heightK = font_sizeK + 2; aggiornaFont(); $("#piuK").css({ opacity: 1, cursor: "pointer" }); } else { $("#menoK").css({ opacity: 0.2, cursor: "not-allowed" }); }/*K8<<*/ }/*K7<<*/ function aggiornaFont() {/*K9>*/ $("body *:not(#cacK, #cacK *)").css({ fontSize: font_sizeK, lineHeight: line_heightK + "px" }); }/*K9<<*/ });/*K<<*/
</script>

.

ciao

.. solo per darti un'ispirazione in più, potrebbe interessarti questo tipo di esempio senza codici:        WebSite X5 Marketplace

.

ciao

.

... non ti preoccupare, ... se servissero chiarimenti o modifiche, avvisami, ... e grazie anche a te... ciao