Contrasto degli hyperlink in modalità scura

Pubblicato qui perché l’argomento di origine è stato chiuso.

Ciao @sam e @chapoi. Grazie per la rapida risposta al rapporto di @hugovk sull’evidenziazione del codice in modalità scura. Anche il team di Python Discourse aveva notato il colore di sfondo scuro per gli hyperlink, ma questo è stato omesso dall’argomento Evidenziazione del codice quasi illeggibile qui.

Puoi vedere che l’hyperlink non in grassetto sembra affondare in un buco…

Potreste rivisitare il colore del testo degli hyperlink in modalità scura?

La stessa tonalità utilizzata per hljs-builtin-names probabilmente funzionerà bene. Il colore di sfondo del corpo del messaggio gli darà una tonalità diversa dallo schema di testo del blocco di codice e il colore contrasterà più fortemente con lo sfondo più scuro del corpo del messaggio.

Grazie! -Leland

Per favore, no!

Non tutti sembrano essere ciechi!

In modalità scura, il testo normale è bianco e i collegamenti ipertestuali sono blu.
Quindi qual è il problema?

1 Mi Piace

Non ho la stessa identica tonalità della tua. Il blu che ho è un po’ più brillante e funziona perfettamente.

2 Mi Piace

Si tratta solo di modificare la tonalità per ottenere un maggiore contrasto, Alex. Gli hyperlink sono leggermente scuri, quindi affondano nello sfondo come mostrato nello screenshot. Sarà sufficiente una o due tonalità.

Tieni presente che gli sviluppatori di Discourse e la maggior parte del team di Python.org sono professionisti con molta esperienza nella progettazione dell’interfaccia utente. Si tratta di aggiustamenti sottili. Non vengono proposte o richieste qui modifiche drastiche.

1 Mi Piace

Puoi facilmente cambiare i colori degli hyperlink per te stesso nelle impostazioni del tema con CSS.

1 Mi Piace

Sto ottenendo lo stesso risultato di @Jonathan_Poyer, dove gli hyperlink qui/sul mio schermo sono già di un blu leggermente più chiaro di quelli nello screenshot:\n\n

\n\nPotrebbe essere una scelta di colore nel tema che stai usando?

2 Mi Piace

Grazie per i confronti, @Jonathan_Poyer e @JammyDodger. È molto utile. Sì, anche i miei collegamenti ipertestuali vengono visualizzati meglio qui. Direi che è circa la quantità esatta di aggiustamento che avevo in mente. Ecco uno screenshot che mostra il collegamento ipertestuale e uno screenshot dall’OP qui.

Per quanto ne so, stiamo utilizzando la configurazione CSS predefinita. Il gruppo di amministratori è il team di sviluppo principale di Python, quindi comprensibilmente preferiscono concentrarsi sull’amministrazione di Python piuttosto che sull’amministrazione di Discourse.

Hanno avuto una discussione sull’evidenziazione del codice a cui ha partecipato Sam Saffron e Charlie ‘Chapoi’ ha apportato la modifica per la prossima versione. Ci siamo solo dimenticati di includere l’argomento dei collegamenti ipertestuali. (Interessante, l’evidenziazione del codice è ora migliore anche se la versione modificata è in sospeso. Forse qualcuno ha trovato l’assegnazione del colore e l’ha modificata.)

All’inizio pensavo che discuss.python.org stesse eseguendo una build di Discourse diversa. Tuttavia, stiamo attualmente eseguendo la versione 2.9.0.beta4 e il visualizzatore di elementi della pagina mostra lo stesso qui:

<meta name="generator" content="Discourse 2.9.0.beta4 - https://github.com/discourse/discourse version 8a58ce6578ab697f29cea211049c37c2ab341ba5">

Sai per caso dove si trova la specifica del colore del collegamento ipertestuale?

1 Mi Piace

Perché il rilascio è in sospeso? La maggior parte dei forum utilizza “test-passed” e non “beta” per gli aggiornamenti. Il nome della versione non è l’unica informazione che si ottiene

1 Mi Piace

Controllando il tuo numero di versione, sembra che tu sia stato aggiornato il 4 giugno, quindi dovresti avere quegli aggiornamenti. :+1:

Credo che sia il colore terziario, che puoi trovare su /admin/customize/colors e selezionare il tema scuro. Sia Meta che il mio sito di test hanno 0f82af come codice colore.

1 Mi Piace

Ora spediamo uno schema di colori scuro aggiuntivo ad alto contrasto in core che probabilmente risolverà il tuo problema. Puoi provare quello schema qui su meta, si chiama WCAG Dark.

Vedo che lo schema non è disponibile nella community Python (molto probabilmente perché la community è stata creata prima che aggiungessimo gli schemi WCAG al core). Quindi, la cosa migliore da fare qui è contattare gli amministratori di quel sito e chiedere loro di abilitare gli schemi di colori WCAG.

4 Mi Piace

È un po’ meglio qui su Discourse Meta, ma sono abbastanza sicuro che stiamo usando i colori predefiniti su Python Discourse.

Collegamenti ipertestuali

Su Python Discourse, i collegamenti ipertestuali sono blu #306897 su grigio #222222, che ha un rapporto di contrasto di 2,69:1, ed è al di sotto delle Linee guida per l’accessibilità dei contenuti Web (livello AA: 4,5:1, livello AAA: 7:1) del W3C.

(Qui su Discourse Meta è un po’ meglio: blu #0F82AF su grigio #222222, rapporto 3,61:1, ma ancora al di sotto di AA e AAA.)

Blocchi di codice

Su Python Discourse, la correzione dei blocchi di codice è stata distribuita ora, ed è decisamente un grande miglioramento.

Ma blu #4288C3 su grigio #3F3F3F a 2,77:1 è ancora al di sotto delle linee guida WCAG, quindi c’è spazio per miglioramenti.

(Qui su Discourse Meta, blu #4288C3 su grigio #3F3F3F a 4,34:1 è analogamente migliore ma al di sotto di AA e AAA.)

3 Mi Piace

Grazie per questo. Wow! È piuttosto magistrale. Tutto è così visibile che ho effettivamente abbassato la luminosità! L’editor di post attivo in basso si rende davvero evidente. Non è così prominente nel tema scuro normale.

L’editor ha un po’ di un bagliore “street neon”, però. Potresti considerare di attenuarlo di uno o due livelli (o scurire la tonalità o aggiungere più rosso/verde). Assottigliare il bordo colorato di un pixel sarebbe forse l’ideale, ma presumo che lo spessore del bordo non sia uno dei parametri del tema.

Mi piace molto il contrasto elevato e scuro.

2 Mi Piace

Direi che i livelli di contrasto qui sono piuttosto ben bilanciati. Anche i vari elementi dell’interfaccia utente devono contrastare tra loro.

Ad esempio, se i collegamenti ipertestuali vengono spostati troppo vicino al rapporto di contrasto tra primo piano e sfondo del W3C, inizieranno a fondersi con il testo del corpo. Quindi, il contrasto tra i colori del testo del corpo e dei collegamenti ipertestuali è ugualmente importante, specialmente quando si tratta di testo di collegamento ipertestuale breve al centro di un paragrafo di testo del corpo.

@sam e @chapoi, sapete se i colori di evidenziazione dei collegamenti ipertestuali e del codice di Discourse Meta sono stati modificati rispetto ai valori predefiniti?

1 Mi Piace

Disclaimer: Non sono Sam o Chapoi :slightly_smiling_face:, ma questi sono i colori predefiniti dello schema scuro dal mio sito di prova (che sono anche quelli su Meta):


Questo particolare sito di prova è stato creato a fine ottobre '21.

2 Mi Piace

0f82af è il colore terziario predefinito corrente per il tema scuro?

1 Mi Piace

Penso di sì. Non ho toccato le mie palette di colori sul mio sito di test, quindi penso che sia una supposizione ragionevole. Tuttavia, qualcuno più esperto potrebbe avere maggiori informazioni. :slightly_smiling_face:

2 Mi Piace

E la tua versione?

<meta name="generator" content="Discourse 2.9.0.beta4 - https://github.com/discourse/discourse version 8a58ce6578ab697f29cea211049c37c2ab341ba5">

1 Mi Piace

Era su 17227e9e53 quando ho controllato le palette di colori, ma ho notato che era qualche commit indietro rispetto a te, quindi ho pensato di aggiornare per essere sicuro. Ora è su 42683d4874 e ha ancora lo stesso codice colore terziario del tema scuro (0f82af).

1 Mi Piace